Bootstrap 5 (update 2021) The navbar-expand* class are still used in Bootstrap 5. Therefore if you want to prevent the Navbar from collapsing (stacking vertically) use navbar-expand. Due to changes in padding, Bootstrap 5 Navbars do require an inner container. Bootstrap 4 (original answer) The simplest way is using the navbar-toggleable-xl navbar-expand class (now in … Read more
After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override: .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } And with this your menu won’t collapse. DEMO (jsfiddle) EXPLANATION The four CSS properties … Read more
Bootstrap 5 (update 2021) Bootstrap 5 still has the sticky-top class that can be used to create a static-to-fixed Navbar effect when the page is scrolled. Bootstrap 5 stick navbar after scrolling (simply sticky-top) Another option is to use a JavaScript IntersectionObserver. This method watches for a “trigger” element. Once the trigger element is visible … Read more
This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag: <script src=”https://code.jquery.com/jquery-1.10.2.js”></script> Then in the body tag, a container is made … Read more
Why is everyone trying to do it the hard way? Sure, some of these approaches will work, but they’re more complicated than is necessary. OK, first – you need an image that will fit within your navbar. You can adjust your image via css height attribute (allowing width to scale) or you can just use … Read more
A very elegant way is to use ng-controller to run a single controller outside of the ng-view: <div class=”collapse navbar-collapse” ng-controller=”HeaderController”> <ul class=”nav navbar-nav”> <li ng-class=”{ active: isActive(“https://stackoverflow.com/”)}”><a href=”https://stackoverflow.com/”>Home</a></li> <li ng-class=”{ active: isActive(‘/dogs’)}”><a href=”http://stackoverflow.com/dogs”>Dogs</a></li> <li ng-class=”{ active: isActive(‘/cats’)}”><a href=”http://stackoverflow.com/cats”>Cats</a></li> </ul> </div> <div ng-view></div> and include in controllers.js: function HeaderController($scope, $location) { $scope.isActive = function (viewLocation) … Read more
Update Bootstrap 5 (2021) The Navbar still uses flexbox so alignment works the same way as Bootstrap 4. Update Bootstrap 4.1+ Bootstrap 4 the navbar now uses flexbox so the Website Name can be centered using mx-auto. The left and right side menus don’t require floats. <nav class=”navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav”> <div class=”container”> … Read more
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block. .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } http://jsfiddle.net/bdd9U/2/ Edit: if you only want this effect to happen when … Read more
I had the same problem today. Bootstrap 4 It’s a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors You have to use .navbar-expand{-sm|-md|-lg|-xl} classes: <nav class=”navbar navbar-expand-md navbar-light bg-light”> Bootstrap 3 @media (max-width: 991px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { … Read more
2018 UPDATE Bootstrap 4 Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile menu on xs screens <576px navbar-expand-md = mobile menu on sm screens <768px navbar-expand-lg = mobile menu on md screens <992px navbar-expand-xl = mobile menu on lg screens <1200px navbar-expand = … Read more