navigation bar example

off canvas mobile menu with fixed navbar

by Darko

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.css">
<script src="https://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.js"></script>
<div id="page">

  <header class="navbar navbar-expand navbar-light fixed-top">

    <a id="menu-toggle" class="d-lg-none" href="#main-nav">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
  </a>

    <a class="navbar-brand" href="#">Go:Do</a>

    <div id="main-nav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>

    </div>

    <a href="#" id="join-btn">Join The Community</a>


  </header>

 ...

CSS

body {
  color: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #121212;
}

a,
a:hover {
  color: #5a007c;
}

header.navbar {
  background-color: #ffffff !important;
  justify-content: space-between !important;
  border-top: 3px solid #ffdc00;
  padding: 0rem 1rem;
}

#menu-toggle {
  position: absolute;
  height: 30px;
  width: 30px;
  top: 50%;
  margin-top: -15px;
  left: 15px;
}

.navbar-light .navbar-brand {
  margin-left: 40px;
  font-size: 40px;
  color: #5a007c;
  font-weight: bold;
}

.navbar-light .navbar-brand:hover {
  color: #5a007c;
}

#main-nav {
  display: none;
}

/* NAVIGATION */

header.navbar #main-nav,
header.navbar #main-nav a.dropdown-item {
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}

header.navbar #main-nav .nav-link {
  color: rgba(0, 0, 0, .4);
}

header.navbar #main-nav .active>.nav-link,
header.navbar #main-nav .nav-link:hover {
  color: #5a007c;
}

/* MOBILE NAVIGATION */

#mm-main-nav .navbar-nav .nav-link {
  padding: 10px 10px 10px 20px;
}

#mm-main-nav.mm-menu_theme-dark {
  background: #5a007c;
}

#mm-main-nav .dropdown-item {
  padding: 10px 10px 10px 20px;
  color: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

#mm-main-nav .dropdown-toggle:after {
  display: none;
}

#mm-main-nav .dropdown-item:hover {
  background-color: transparent;
}

#mm-main-nav .dropdown-item:focus,
#mm-main-nav .dropdown-item.active {
  background: rgba(0, 0, 0, .1);
}

#mm-main-nav .dropdown-menu.mm-panel {
  padding: 20px 0 0;
  border: none;
  border-radius: 0;
}

#join-btn {
  margin-right: -15px;
  margin-left: 15px;
  padding: 30px 15px;
  background-color: #ffdb00;
  text-transform: uppercase;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
}

#hero {
  background-image: url('https://media.istockphoto.com/photos/people-doing-stretching-exercise-picture-id658596808?s=2048x2048');
  background-size: cover;
  background-position: top center;
  background-color:...

JavaScript

(function($) {
  "use strict"; // Start of use strict

  $('#main-nav').mmenu({
    extensions: ['theme-dark', 'border-full', 'pagedim-black'],
    'offCanvas': {
      pageSelector: "#page",
      zposition: 'next'
    }
  }, {
    clone: true
  });

  var api = $("#mm-main-nav").data("mmenu");

  // Fixed elements
  api.bind("open:before", function($panel) {
    var fromTop = $(document).scrollTop();
    $("header.navbar.fixed-top").css("top", fromTop + "px");
  });
  api.bind("close:finish", function($panel) {
    $("header.navbar.fixed-top").css("top", 0 + "px");
  });

})(jQuery);