Skip to content
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
Closed

Further navbar refinement #20937

mdo opened this issue Oct 19, 2016 · 12 comments
Labels
Projects

Comments

@mdo
Copy link
Member

@mdo 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 mentioned this issue Oct 19, 2016
2 of 6 tasks complete
@PascalPixel
Copy link
Contributor

@PascalPixel PascalPixel 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
Copy link

@ghost 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
Copy link

@ghost ghost commented Oct 26, 2016

Kinda like a sidebar instead

@leesmith
Copy link

@leesmith leesmith commented Oct 29, 2016

Are the examples still a work in progress?

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

@PascalPixel
Copy link
Contributor

@PascalPixel PascalPixel 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
Copy link

@ghost 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
Copy link

@azrull 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)

@PascalPixel
Copy link
Contributor

@PascalPixel PascalPixel 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
Copy link

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

@PascalPixel
Copy link
Contributor

@PascalPixel PascalPixel 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
Copy link

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

@whomba
Copy link

@whomba 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 mentioned this issue Dec 22, 2016
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
Projects
Alpha 6
Tracking
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.