I was having a similar problem, and I believe I found an improved solution. Don’t bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix(): $(‘#nav’).affix({ offset: { top: $(‘#nav’).offset().top } }); The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. … Read more
You can overwrite the bootstrap colors, including the .navbar-inner class, by targetting it in your own stylesheet as opposed to modifying the bootstrap.css stylesheet, like so: .navbar-inner { background-color: #2c2c2c; /* fallback color, place your own */ /* Gradients for modern browsers, replace as you see fit */ background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, … 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
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
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
TL;DR: Create another <ul class=”navbar-nav ml-auto”> for the navbar items you want on the right. ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left. Tested against Bootstrap v4.5.2 <!DOCTYPE html> <html lang=”en”> <head> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; … 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
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
2021 Update Bootstrap 5 (beta) Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of “left” and “right” has been replaced with “start” and “end”. Therefore the margin utilities changed for Bootstrap 5 beta: ml-auto => ms-auto mr-auto => me-auto Also note that data-toggle and data-target have … Read more