twbs/bootstrap

v4: Navbars

Closed this issue · 12 comments

mdo commented

Meta tracking issue for todos on our navbars across the board. Some of this overlaps with our examples mind you.

  • #18049: Navbar text?
  • #18053: Containers add extra padding?
  • #17532: Dropdowns in navbar navs?
  • #17250: No responsive nav love right now
  • #18115: Light vs dark nomenclature needs ironing out

New from me as of 5/10:

  • #19280: Docs navbar has some funky behavior
  • #17990, #18868: The blown out responsive navbar transitions on expand, but toggles awkwardly on collapse
  • #17539 , #18863, #18865: Navbar togglers don't respect color scheme
  • #18495: Navbar and page zoom?
  • #18599: Inconsistent use of .active across navs
  • #18751: Input groups are too wide in navbars
  • #18855: Customizing navbar-brand
  • #18875: Flexbox variation is funky

Pulled from @cvrebert's comment:

  • Add migration guidance for navbars and old v3 navbar classes (refs #18767)
  • Fix transitions on collapsible navbars (refs #18868) Covered above in the list.
  • Should .active go on .nav-item, or .nav-link, or either? In any event, needs clearer docs. (refs #18932)
mdo commented

Btw, was going to try to tackle this stuff in the second alpha, but I just haven't had time to devote to tearing this all apart and putting it thru its paces.

hanakin commented

possibly look into adding a variation of the navbar where the padding is on the items and not global to the navbar class. similar to the way materialize handles it http://materializecss.com/navbar.html#icons

its more often that I refactor the navbar to work in this manner especially when working with applications where the icons are usually the links.

easy wy would be to add variables for all the paddings, margins & heights as not all of them currently have them.

Studio384 commented

Perhaps also some love for a navbar-right-replacement?

cvrebert commented
  • Add migration guidance for navbars and old v3 navbar classes (refs #18767)
  • Fix transitions on collapsible navbars (refs #18868)
  • Should .active go on .nav-item, or .nav-link, or either? In any event, needs clearer docs. (refs #18932)
disjfa commented

I don`t know if you already have something. I can help.

I am toying with a layout for the navbar. In v3 you had a .navbar-header for placement for the brand and button. I am trying to get around that couse i would like to create a flex menu for placement using flexbox, but don`t know how yet. Maybe toy around with floats vs table-cell.

But some simple things i have planned ;

  • responsive sized dropdown (v4 .navbar-toggleable-)
  • brand without padding so images fit full height
  • testing flex
  • dropdowns

Will create a pull request later

agcolom commented

@mdo, Hi Mark, while you're doing this, it might be a good idea to create a navbar-static-bottom class to allow the navbar to sit nicely at the bottom of the page (but not fixed at the bottom of the window), with margin-bottom: 0; (to override the default bottom margin) and border-radius: 0; (to override the current 4px border-radius).

cvrebert commented

@agcolom See #11527 and try searching more in the future.

agcolom commented

@cvrebert Sorry I missed that, and thanks for pointing me to this issue. On a side note, I was only trying to be helpful (I realise I wasn't and sorry for wasting your time), and something like: "Thanks for this. We've actually already discussed this, see #11527" would have been much nicer and would have encouraged me to contribute in future.

  • 👍19
hugmanrique commented

Also, .navbar-static-top isn't working ATM. You can see this in the official Bootstrap page here

lvmajor commented

Has this been updated recently and provide the current state of the navbar progress?

lvmajor commented

^Sad news... Oh well, will stick to bootstrap 3 for now. Keep up the good work though! It will be awesome.

mdo commented

Closing since majority of this was done in #19890. Rest will follow in Alpha 6.