Material Design: Bootstrap 3 Responsive Navbar

Question

Current code: http://www.bootply.com/NuuxNSnmrf

I have a few issues I am struggling with in this revision:

• hamburger icon is not on the left side upon collapse
• vertical gap between left and right side text
• brand is not centered

My goal:

Suggestions appreciated!

Answer 1

What I have changed:

• included expanded left & rigt navbar toggle buttons inside the navbar-header div and got rid of the container div on left-navbar-menu & right-navbar-menu unordered list elements.
• applied float:left on the hamburger menu
• aligned left navbar and right navbar list item text to left and right respectively.
• included as third dummy search button.

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  color: #FFFFFF;
  margin: auto;
}
.navbar {
  background-color: #3F50B5;
  color: #FFFFFF;
}
a {
  color: #FFFFFF !important;
}
a:hover {
  color: #000000 !important;
}
.custom-navbar .hamburger-on-left {
  float: left;
}
.navbar-left li {
  text-align: left;
}
.navbar-right li {
  text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-fixed-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <!-- expanded behavior -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <!-- expanded left navbar-->
      <div class="navbar-left">
        <button type="button" class="navbar-toggle hamburger-on-left" data-toggle="collapse" data-target="#left-navbar-menu">
          <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="false"></span>
        </button>
      </div>

      <!-- expanded right navbar -->
      <div class="navbar-right">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#right-navbar-menu">
          <span class="glyphicon glyphicon-option-vertical" aria-hidden="false"></span>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
          <span class="glyphicon glyphicon-search" aria-hidden="false"></span>
        </button>
      </div>
    </div>



    <!-- collapsed behavior -->
    <ul id="left-navbar-menu" class="nav navbar-nav navbar-left navbar-collapse collapse">
      <li><a href="#">Left</a>
      </li>
      <li><a href="#about">Left</a>
      </li>
    </ul>

    <ul id="right-navbar-menu" class="nav navbar-nav navbar-right navbar-collapse collapse">
      <li><a href="#about">Right</a>
      </li>
      <li><a href="#contact">Right</a>
      </li>
    </ul>

  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

I wrote my own minimal bootstrap navbar stylesheet which builds on top of Bootstrap variables. /* material navbar */

.material-navbar {

  /*

  Hides normally visible elements

  important notes:
  @grid-float-breakpoint - point at which navbar becomes uncollapsed
  @grid-float-breakpoint-max - point at which the navbar begins collapsing

  */

  > * {
    width: 100%;
    flex: 1;
    list-style-type: none;
  }

  > .left {
    text-align: left;
  }

  > .center {
    text-align: center;
  }

  > .right {
    text-align: right;
  }

  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  margin: 0;

  /* collapsed */
  @media (max-width: @screen-sm-max) {
    display: none;
  }

  /* not collapsed */
  @media (min-width: (@screen-sm-max - 1px)) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

}

.material-navbar-collapsed {

  /*

  Shows normally visible elements

  important notes:
  @grid-float-breakpoint - point at which navbar becomes uncollapsed
  @grid-float-breakpoint-max - point at which the navbar begins collapsing

  */

  > * {
    width: 100%;
    flex: 1;
    list-style-type: none;
  }

  > .left {
    text-align: left;
  }

  > .center {
    text-align: center;
  }

  > .right {
    text-align: right;
  }

  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  margin: 0;

  /* collapsed */
  @media (max-width: @screen-sm-max) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* not collapsed */
  @media (min-width: (@screen-sm-max - 1px)) {
    display: none;
  }

}

Example: https://jsfiddle.net/eo2gsxcm/

Update 1: https://jsfiddle.net/eo2gsxcm/1/

Update 2: Set viewport breakpoints to screen-sm-max https://jsfiddle.net/eo2gsxcm/2/

Answer 3

Update like this along with your code: Demo

.navbar-toggle {
    float: left;      
}        
.navbar-brand {
    display: block;
    float: none;        
    text-align: center;
}    
.navbar-nav > li > a {       
    padding-bottom: 3px;
    padding-top: 3px;
}