Horizontal Navbar

Horizontal Navbar Example


The navbar allows some nav items to be positioned to the right of the navbar by enabling ‘.ml-auto’ on the first of the links we want to position to the right.  These links should differ from regular page links and have a more ‘action-oriented’ role on your site.


We include icons for home and search.  More custom icons can be added by using font icon libraries or custom making your own.

Optional nav classes

.sticky-top – enables a navbar that sticks to the top of the browser window when scrolling
. nav-fill – stretches the navbar links to fit the width of the navbar
. navbar-lg – if you have a lot of navigation items or long ones, using this class will reduce the amount of padding to help them fit. try using this class with with .nav-fill


<nav class="navbar navbar-expand-lg navbar-dark navbar-site sticky-top0 nav-fill0 navbar-lg0">
    <div class="container">
     <button class="navbar-toggler site-toggler collapsed" type="button" data-toggle="collapse" data-target="#siteMenu" aria-controls="siteMenu" aria-expanded="false" aria-label="Toggle navigation">
      In this Section
      <div class="collapse navbar-collapse" id="siteMenu">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item home-icon active">
            <a class="nav-link" href="#">Home</a>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item active" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
          <li class="nav-item search-icon  ml-auto">
            <a class="nav-link" href="#">Search</a>