Bootstrap 5 (update 2023) As stated in the docs, For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Bootstrap 4 (update 2018) 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 … Read more
You can justify the navbar contents by using: @media (min-width: 768px){ .navbar-nav{ margin: 0 auto; display: table; table-layout: fixed; float: none; } } See this live: http://jsfiddle.net/panchroma/2fntE/
If you don’t want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me: @media (min-width: 768px) and (max-width: 991px) { .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block !important; } .navbar-header .collapse, .navbar-toggle { display:block !important; } .navbar-header … Read more
Position sticky was not working for me due to the body element having overflow-x: hidden; set.
You can change this in your CSS with the property padding: .navbar-nav > li{ padding-left:30px; padding-right:30px; } Also you can set margin .navbar-nav > li{ margin-left:30px; margin-right:30px; }
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
You have to also add the “navbar-brand” class to your image a container, also you have to include it inside the .navbar-inner container, like so: <div class=”navbar navbar-fixed-top”> <div class=”navbar-inner”> <div class=”container”> <a class=”navbar-brand” href=”https://stackoverflow.com/questions/9893723/index.html”> <img src=”images/57x57x300.jpg”></a> </div> </div> </div>
For Bootstrap 3 this is how I did this based on the default Navbar structure: .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #FFFF00; color: #FFC0CB; }
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
After spending few hours, adding the following css class fixed my issue. Work with Bootstrap 3.0.* .tnav .navbar .container { height: 28px; } Work with Bootstrap 3.3.4 .navbar-nav > li > a, .navbar-brand { padding-top:4px !important; padding-bottom:0 !important; height: 28px; } .navbar {min-height:28px !important;} Update Complete code to customize and decrease height of navbar with … Read more