v4: Navbar improvements #19890

merged 41 commits into from Oct 19, 2016


None yet

4 participants

mdo commented May 12, 2016 edited

WIP as I slog through #18467.

  • New Sass variables for various navbar components.
  • #17250: Improved (and highly flexible) responsive behaviors added.
  • #17532: Dropdown example for navbars.
  • #17539 , #18863, #18865: Navbar togglers don't respect color scheme.
  • 083271a: Update collapsible navbar docs to demonstrate color scheme functionality of navbar toggler.
  • #17990, #20392, #20749: Clear the floats within .navbar-toggleable-* to avoid broken animation on close.
  • #18049: Restore .navbar-text and add some docs examples.
  • #18855: Docs for examples of using images in navbar brand component.
  • #18599: Clarify usage of .active in navbar navs.
  • #20543: Improve color contrast of navbar nav links.
  • #20856: Navbar brand and image options (solved thanks to utilities).

Still to do:

  • #18053: Container adding extra padding
  • #18115: Revisit light/dark nomenclature
  • #18557: Make sure docs navbar is updated
  • #18751: Input group sizing in navbar
  • #18875: Flexbox navbar
  • Migration docs
mdo added some commits May 12, 2016
@mdo mdo Alternate fix to #18865: Change the .navbar-toggler color for light/d…
…ark navbars as we do with the .navbar-brand
@mdo mdo Update collapsible navbar docs
- Add .text-muted for text color control over .bg-inverse in the examples
- Add a dark navbar collapse example
@mdo mdo added css v4 labels May 12, 2016
@mdo mdo added this to the v4.0.0-alpha.3 milestone May 12, 2016
mdo added some commits May 13, 2016
@mdo mdo clarify example with code comment 9c100a6
@mdo mdo add new variable for -toggle-font-size 3021c24
@mdo mdo new var for -toggle-border-radius 906357b
@mdo mdo correction, -toggler-*
@mdo mdo more navbar variables c6c0522
@mdo mdo Add dropdown menu example to navbar docs
@mdo mdo add docs note to clear up #18599--active states for navbars can be on…
… anchors or parents
@mdo mdo Merge branch 'v4-navbars' of https://github.com/twbs/bootstrap into v…
mdo added some commits May 15, 2016
@mdo mdo Restore .navbar-text and add some basic examples to the docs /cc #18049 dfa2536
@mdo mdo improve docs examples for .navbar-text
os1r1s110 commented Jul 19, 2016 edited

Is there anything preventing this from being merged in dev branch? I might not really understand completely how it all works yet... sorry.

Is it waiting the "alpha.3" milestone reach? Or is it something else that I don't get?

rafalp commented Jul 19, 2016

@os1r1s110 as first words in PR's say, this is work in progress PR that aims to solve certain issues within BS4's navbars that are tracked here:


It'll likelly get merged when it's considered done by the author... unless @mdo decides to split the work in few PR's and merges what he has done so far.

os1r1s110 commented Jul 19, 2016 edited

@rafalp I did effectively read that this was WIP, but you know sometimes in big open source projects, some open PR get lost in the sea of PRs and other issues so I just wanted to know what was up with this one as there had been no update since a couple of weeks, that's it.... :|

As you can also see my comment on #18467, there has also been no update since a long time in this PR so I kind of just wanted to get an update on the status and verify if it was still at this state or not for the progress. Reading your answer I guess that it does...

rafalp commented Jul 19, 2016

@os1r1s110 It seems that @mdo has reduced his commitment to the project lately:


It may suck if you are waiting for Mark to wrap up his PR's, but that's how it is with open source. Give it time, I'm wholly expecting @mdo to come from nowhere one day and push boatload of work into BS4 ;)


Ahah yeah, I couldn't say it sucks to wait for him to close up the navbar PRs because I can't complete them myself so I can't complain.

I'm pretty new to frontend development so I'm trying to build my own version of navbar and just cut it from the bootstrap alpha 2 build to avoid compatibility issues.

@mdo mdo Fixes #17990: clear the floats within .navbar-toggleable-* to avoid f…
…unky animation on close
@mdo mdo modified the milestone: v4.0.0-alpha.3, v4.0.0-alpha.4 Jul 25, 2016

@mdo - do dropdowns need adding to navbars - or are they abstracted from the navbar docs now?

mdo added some commits Sep 15, 2016
@mdo mdo Merge branch 'v4-dev' into v4-navbars 64dcb8b
@mdo mdo Fixes #20543: Significantly darken the links in default navbars
mdo commented Sep 15, 2016

Added #20543 to this PR to address color contrast a bit.

mdo added some commits Sep 15, 2016
@mdo mdo fix that navbar toggler example in docs
@mdo mdo Merge branch 'v4-dev' into v4-navbars 1db3586
@mdo mdo Merge branch 'v4-dev' into v4-navbars
@mdo mdo fix bad merge
@mdo mdo remove those files from the diff
@mdo mdo Merge branch 'v4-dev' into v4-navbars b4cdccb
@mdo mdo Merge branch 'v4-navbars' of github.com:twbs/bootstrap into v4-navbars 247ad23
@mdo mdo drop data-target so the dropdown link works 19d6092
@mdo mdo Iterate over breakpoints to generate .navbar-toggleable classes
- Moves .navbar-brand margin and float to media queries
- Replaces the static media queries with an each loop to generate all the needed classes
@mdo mdo Fix sass map navbar-toggleable
Follow up to 6e8ce0c. Uses the breakpoint-next mixin to snag the next breakpoint in the media query for proper styling.
@mdo mdo set the border color on the toggler e24f406
@mdo mdo add navbar-brand and navbar-nav styles to the toggleable 484a8e3
@mdo mdo document new navbar classes and styles, update responsive variation, …
…fix broken float classes
@mdo mdo docs copy
@mdo mdo lint
@mdo mdo html linting
@mdo mdo more html linting
mdo commented Oct 18, 2016

Pushed a few major changes to this the last few days. The toggler has been updated, toggleable classes are now generated from the breakpoint Sass map, and docs updated. Overall I think this is in a solid enough place to build on just a tad more in Alpha 6. Definitely want folks to try using it more.

mdo commented Oct 19, 2016

Updated opening comment with clearer list of issues this all fixes, and the remaining todos.

mdo added some commits Oct 19, 2016
@mdo mdo Merge branch 'v4-dev' into v4-navbars 271f10f
@mdo mdo Tweak that navbar brand image alignment with new vertical align utils
@mdo mdo More navbar example content with forms
@mdo mdo alt attributes
mdo commented Oct 19, 2016

Punting on some of this for Alpha 6. Trying to wrangle all this ahead of dropping Alpha 5 tomorrow, so apologies for the potentially half baked ship here. 😬

@mdo mdo merged commit 028dd6b into v4-dev Oct 19, 2016

3 of 4 checks passed

savage Savage has initiated its special separate Travis CI build
continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed
hound No violations found. Woof!
@mdo mdo deleted the v4-navbars branch Oct 19, 2016
mdo commented Oct 19, 2016

Going to track remaining work for Alpha 6 in #20937.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment