New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Further navbar refinement #20937

Closed
mdo opened this Issue Oct 19, 2016 · 12 comments

Comments

Projects
7 participants
@mdo
Member

mdo commented Oct 19, 2016

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

Merged

v4: Navbar improvements #19890

2 of 6 tasks complete
@Superpencil

This comment has been minimized.

Show comment
Hide comment
@Superpencil

Superpencil Oct 25, 2016

Contributor

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>
Contributor

Superpencil commented Oct 25, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 26, 2016

@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 commented Oct 26, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 26, 2016

Kinda like a sidebar instead

ghost commented Oct 26, 2016

Kinda like a sidebar instead

@leesmith

This comment has been minimized.

Show comment
Hide comment

Are the examples still a work in progress?

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

@Superpencil

This comment has been minimized.

Show comment
Hide comment
@Superpencil

Superpencil Oct 30, 2016

Contributor

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

Contributor

Superpencil commented Oct 30, 2016

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 30, 2016

@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

ghost commented Oct 30, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@azrull

azrull Oct 31, 2016

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

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)

@Superpencil

This comment has been minimized.

Show comment
Hide comment
@Superpencil

Superpencil Oct 31, 2016

Contributor

@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

Contributor

Superpencil commented Oct 31, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@reefdog

reefdog 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 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.

@Superpencil

This comment has been minimized.

Show comment
Hide comment
@Superpencil

Superpencil Nov 17, 2016

Contributor

@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

Contributor

Superpencil commented Nov 17, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@aRestless

aRestless Nov 17, 2016

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

This comment has been minimized.

Show comment
Hide comment
@whomba

whomba Nov 21, 2016

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

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

margin-right

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

whomba commented Nov 21, 2016

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

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

margin-right

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

@mdo mdo referenced this issue Dec 22, 2016

Merged

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