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!
Best How To :
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/