Bootstrap Navbars Examples

< View Code Snippets Library

  • Transparent Navbar Over Jumbotron that Turns Opaque on Scroll

    Transparent Navbar Over Jumbotron that Turns Opaque on Scroll

     Bootstrap 4
  • Off Canvas Menu with Toggle Always Visible

    Off Canvas Menu with Toggle Always Visible

     Bootstrap 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 right

    Navbar with centered logo with links on left and right

     Bootstrap 4
  • Transparent Fixed Top Navbar Bootstrap 4

    Transparent Fixed Top Navbar Bootstrap 4

     Bootstrap 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 Navbar

    Bootstrap 4 Mega Dropdown Menu Navbar

     Bootstrap 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 Dropdowns

    Double Row Navbar with Dropdowns

     Bootstrap 4

    This example demonstrates how you can have a multiple row navbar that collapses.

  • Off Canvas Left Side Menu Navbar with Toggle Visible on Mobile

    Off Canvas Left Side Menu Navbar with Toggle Visible on Mobile

     Bootstrap 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://npmcdn.com/js-offcanvas@1.0/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://npmcdn.com/js-offcanvas@1.0/dist/_js/js-offcanvas.pkgd.min.js'></script>
  • Navbar with Full Screen Modal Search Form

    Navbar with Full Screen Modal Search Form

     Bootstrap 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