Material Design: Bootstrap 3 Responsive Navbar - css

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

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;
}

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

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>Left
</li>
<li>Left
</li>
</ul>
<ul id="right-navbar-menu" class="nav navbar-nav navbar-right navbar-collapse collapse">
<li>Right
</li>
<li>Right
</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>