navbar

How to change Bootstrap navbar collapse breakpoint

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

Bootstrap Navbar list items/links not showing

In Bootstrap 4, the navbar-expand-* class is needed to show the horizontal navbar, otherwise it will collapse into it’s mobile state. Make sure you’ve referenced it properly in the Codepen as https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css Or, use Codeply, and it will include the all the relevant libraries for you: Bootstrap 4 on Codeply Here’s the Navbar with Bootstrap … Read more

How to make a Bootstrap 4 full width dropdown in Navbar?

Use w-100 (width:100%) on the dropdown-menu, and make sure the parent .dropdown is position-static to allow the menu to expand to full width… <nav class=”navbar navbar-expand-lg”> <a class=”navbar-brand” href=”#” style=”color: red;”>LOGO GOES HERE</a> <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”></span> </button> <div class=”collapse navbar-collapse” id=”navbarSupportedContent”> <ul class=”navbar-nav”> <li class=”nav-item dropdown position-static”> … Read more

How to slide nav bar from left instead from top?

Easy. Change the default behavior from <button … data-toggle=”collapse” data-target=”#my-navbar-collapse”> to slide-collapse functionality which we are going to implement now <button … data-toggle=”slide-collapse” data-target=”#my-navbar-collapse”> Where the menu is contained within div that has the id my-navbar-collapse. Note that using id instead of class selector will improve the accessibility because bootstrap will append ARIA states (expanded/collapsed) … Read more

Decreasing height of bootstrap 3.0 navbar

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

Mysterious whitespace in between Bootstrap2 Navbar and row underneath

You may want to override the margin-bottom: 20px from navbar : .navbar { margin-bottom: 0; } Something like that : http://jsfiddle.net/q4M2G/ (the !important is here just to override the style of the CDN version of bootstrap I’m using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap … Read more