Bootstrap Navbars Examples< View Code Snippets Library
Transparent Navbar Over Jumbotron that Turns Opaque on ScrollBootstrap 4
Off Canvas Menu with Toggle Always VisibleBootstrap 4
This demo is a remix of the off canvas example on the Bootstrap 4 documentation. The default behavior of the navbar is to only show the mobile menu toggle on mobile screen sizes. This overrides the functionality to always show the mobile menu toggle and then display it off canvas.
Navbar with centered logo with links on left and rightBootstrap 4
Transparent Fixed Top Navbar Bootstrap 4Bootstrap 4
This code example demonstrates how to have a transparent or navbar with no background color. But when you click on the mobile dropdown toggle or scroll down it will add a background color to make the nav text readable.
Bootstrap 4 Mega Dropdown Menu NavbarBootstrap 4 Bootstrap 3
This Bootstrap example customizes the navbar to have a full width dropdown menu for certain nav items. The customization requires adding the CSS and JS below to allow the dropdowns to work on hover as well as touch.
Double Row Navbar with DropdownsBootstrap 4
This example demonstrates how you can have a multiple row navbar that collapses.
Off Canvas Left Side Menu Navbar with Toggle Visible on MobileBootstrap 4 Bootstrap 3
Customize the default Bootstrap 4 navbar to have a mobile friendly off-canvas side menu. This plugin duplicates the desktop nav menu and adds it to the off canvas aside menu. So you will only need to update your links in one spot. You can learn more about the off canvas plugin here.
Add inside head tag
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel='stylesheet prefetch' href='https://firstname.lastname@example.org/dist/_css/minified/js-offcanvas.css'>
Add before closing body tag
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src='https://email@example.com/dist/_js/js-offcanvas.pkgd.min.js'></script>
Navbar with Full Screen Modal Search FormBootstrap 3
Create a Bootstrap full screen search form modal by applying this customization to your project.
Looking for something else?
Suggest or contribute a code snippet to be added to the library.
Other Code Snippet Categories