• 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.

  • 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 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

    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

    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

    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