Click here to Skip to main content
15,885,244 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Code:
<div class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>
               @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
           </div>

           <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                   <li>@Html.ActionLink("Home", "Index", "Home")</li>
                   <li>@Html.ActionLink("About", "About", "Home")</li>
                   <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               </ul>
           </div>
       </div>
   </div>


What I have tried:

See image here
Posted
Updated 9-Apr-20 8:02am
v3
Comments
Richard MacCutchan 4-Apr-20 4:04am    
What is the question?
OriginalGriff 4-Apr-20 4:52am    
"It don't work"?
Richard MacCutchan 4-Apr-20 5:03am    
Ah, I see. Thank you for the clarification, and comprehensive details. :/
OriginalGriff 4-Apr-20 5:20am    
I'm trying to join the herd mentality. :sigh:
This may be a mistake, despite winding my IQ down several dozen notches.
Richard MacCutchan 4-Apr-20 7:03am    
I know the feeling.

What my friends here are trying to say, is that it looks like you've got yourself a CSS issue there.

You code follows the default ASP.Net MVC Razor code - just make sure that 1) This code exists within the *Body* element, and 2) that all required CSS files can be found by your application.

Default ASP.Net MVC app source:
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
...
</Body>
*(Edited to include Body Tag, which CP deleted from my original submission - probably to prevent html issues.)*
 
Share this answer
 
v2
You can check for bootstrap version. If you have updated it recently. There're a lot of changes in Bootstrap 4 in comparison to older versions.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900