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:

• v4 navbar with container inside results in extra padding #18053: Container adding extra padding for mobile sizes
• v4: light vs dark in navbars and cards #18115: Revisit light/dark nomenclature revisited
• Flexbox navbar elements wrap onto new line instead of inline #18875: Flexbox support added
• Support for text-only items in navbar #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>

@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

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

@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