Bootstrap Priority Navigation

In this example below you will see how to do a Bootstrap Priority Navigation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Priority Navigation</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="navbar navbar-default navbar-priority js-navbar-priority">
  <div class="container">
    <!-- Brand -->
    <!-- Do ot use collapse behavior-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle js-priority-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Note that there is no collpase -->
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Long link</a></li>
      <li><a href="#">Not very very short link</a></li>
      <li><a href="#">Basic link</a></li>
      <li><a href="#">Foo link</a></li>
      <li><a href="#">T link link</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Specific CTA</a></li>
    </ul>
  </div>
</nav>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/bootstrap-priority-navigation-xVaGaZ */
.navbar-priority {
  height: 50px;
  overflow: hidden;
}
.navbar-priority .navbar-header {
  float: left;
}
.navbar-priority .navbar-header .navbar-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}
@media (min-width: 1165px) {
  .navbar-priority .navbar-header .navbar-toggle {
    display: none;
  }
}
.navbar-priority .navbar-nav {
  float: none;
  margin: 0;
  padding-right: 50px;
}
@media (min-width: 1165px) {
  .navbar-priority .navbar-nav {
    float: left;
  }
}
.navbar-priority .navbar-nav li {
  float: left;
}
.navbar-priority .navbar-nav li a {
  padding-top: 15px;
  padding-bottom: 15px;
}
.navbar-priority .navbar-right {
  float: none !important;
  margin-right: -15px;
}
@media (min-width: 1165px) {
  .navbar-priority .navbar-right {
    float: right !important;
  }
}
.navbar-priority.navbar-priority--open {
  height: auto;
}
.navbar-priority.navbar-priority--open .navbar-header {
  float: none;
}
.navbar-priority.navbar-priority--open .navbar-nav li {
  float: none;
}


/*Downloaded from https://www.codeseek.co/tibomahe/bootstrap-priority-navigation-xVaGaZ */
function navbarPriority() {
  var $navbar = $('.js-navbar-priority'),
      $navbartrigger = $('.js-priority-toggle');
  
  $navbartrigger.on('click', function() {
    $navbar.toggleClass('navbar-priority--open');
  });
  
};

navbarPriority();

//Best practice is to export / import navbarPriority module

Comments