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:
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>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav navbar-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
Are the examples still a work in progress?
@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
is there any option that we can properly integrates logo with responsive property such as navbar-brand-(xs, sm, etc)
@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
@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.
@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
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?
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.