Further navbar refinement #20937

mdo opened this Issue Oct 19, 2016 · 12 comments


Tracking in Alpha 6

8 participants

mdo commented Oct 19, 2016 edited

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
@mdo mdo added css v4 labels Oct 19, 2016
@mdo mdo added this to the v4.0.0-alpha.6 milestone Oct 19, 2016
@mdo mdo referenced this issue Oct 19, 2016

v4: Navbar improvements #19890

2 of 6 tasks complete

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 class="collapse navbar-toggleable-md" id="navbarResponsive">
    <ul class="nav navbar-nav">
      <li class="nav-item"></li>

@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

azrull commented Oct 31, 2016

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

reefdog commented Nov 16, 2016

@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?

whomba commented Nov 21, 2016 edited

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.


screen shot 2016-11-20 at 10 52 29 pm


screen shot 2016-11-20 at 10 53 04 pm

@mdo mdo referenced this issue Dec 22, 2016

v4: Flexbox navbar #21390

4 of 4 tasks complete
@mdo mdo added the has-pr label Dec 22, 2016
@mdo mdo closed this in #21390 Dec 22, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment