user2024080 user2024080 - 14 days ago 5
CSS Question

Bootstrap right navibar messy how to fix this?

I am trying to add the



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="" title="">Other contacts</a></li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>





In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?

Answer

You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.

[body > .container > .navbar > .container]

To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.

change to [body > .navbar > .container OR .container-fluid]

ONE MORE THING TO SAY

[Practice makes perfect]

Comments