Further navbar refinement

[mdo]

Alpha 5 is seeing a major navbar update, but it's still not ready for prime time. I'm struggling to figure out a solid way to build this right now that works for all the components, responsive behaviors, and the default/flex variations.

With some of the other Alpha 6 changes I have planned, I'm hoping to get these remaining navbar issues in our next release:

• #18053: Container adding extra padding for mobile sizes
• #18115: Revisit light/dark nomenclature revisited
• #18875: Flexbox support added
• #20116: Better .navbar-text support
• Migration docs added

[PascalPixel]

While @mdo works on alpha6, here is a Bootstrap 3-like navbar on alpha5:

<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="clearfix float-lg-left">
    <button aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-lg-up float-xs-right" data-target="#navbarResponsive" data-toggle="collapse" type="button"></button>
    <a class="navbar-brand">Navbar</a>
  </div>
  <div class="collapse navbar-toggleable-md" id="navbarResponsive">
    <ul class="nav navbar-nav">
      <li class="nav-item"></li>
    </ul>
  </div>
</nav>

[ghost]

@mdo is there a possibility that you can add in some classes to make the Nav bar slide in from the left on smaller devices rather than dropdown? A lot cleaner imo

[ghost]

Kinda like a sidebar instead

[leesmith]

Are the examples still a work in progress?

http://v4-alpha.getbootstrap.com/examples/navbar-top/

[PascalPixel]

@jackaThompson its not that hard to give it a shot yourself?
@leesmith yes they are, wait for the next alpha

[ghost]

@PascalPixel I know it's not hard to implement it myself but I think a lot of people could agree that a "sidebar" feel is better than the dropdown

[azrull]

is there any option that we can properly integrates logo with responsive property such as navbar-brand-(xs, sm, etc)

[PascalPixel]

@JackaThompson In my entire career, every time I've made any sidebar of sorts it has been removed or taken down at a later point, people want top navigation (examples: Facebook, Twitter, Github, Heroku...)

@azrull the proper way is to use different logos for different sizes using .hide-sm-up etc
alternatively, if you want to hack it together like a freak just put .col-xs-3 on your image

[reefdog]

@PascalPixel I think what @XeroEsports (née @JackaThompson) meant was something more like this Parallax Left demo. There are a few things I don't like about that demo implementation specifically, but I too would love to see a Bootstrap-leveraged version of this. Since it seems a little out of scope for Bootstrap default, I'll probably build my own and share it.

[PascalPixel]

@reefdog sounds good, it's not very hard to do, just wrap all content except the navbar in a scrollable absolute div, then change the classes with css and add a css animation

[aRestless]

Probably doesn't deserve its own issue, so here we go: .navbar-nav .nav-item has a fixed margin of 1rem and does not use $nav-item-margin, which is used for .nav-pills .nav-item, .nav-tabs .nav-item and .nav-stacked .nav-item.

Shouldn't the 1rem for .navbar-nav .nav-item at least get its own variable?

[whomba]

Probably worth noting, but I think .nav-items should have a margin-right instead of margin-left. This is because if your navbar is long (or just have big words, like in german) there is the risk of wrapping. Using margin-left gives an odd indented look where as using margin-right would have everything lay flush on the left.

margin-left

margin-right