v4: Flexbox navbar #21390
v4: Flexbox navbar #21390
Conversation
- drop the table styles, use flex - remove commented out code - consolidate styles a bit - add a huge flex-grow to the nav, making the assumption you want nav to take up most space
| display: flex; | ||
| flex: 0 0 auto; | ||
| flex-wrap: nowrap; | ||
| align-items: center; |
There was a problem hiding this comment.
Properties should be ordered display, flex, flex-wrap, width, align-items
… mobile contents aligned better
…ered with siblings
|
Updated the
|
…ble class generation area; this way the .navbar-toggleable-* goes on .navbar, easily affecting everything that needs updating for each breakpoint's use
…ng given flexbox implementation
… for proper responsive styles
…sponsive navbars
| margin-left: 0; | ||
| } | ||
| > .container { | ||
| padding-left: 0; |
There was a problem hiding this comment.
Properties should be ordered padding-right, padding-left
…schemes, renaming .navbar-dark to .navbar-inverse (matching .card-inverse in the process and restoring v3's inverted class name)
- Require inner element for the icon for improved customization (e.g., drop the element to replace it with your own icon font or SVG) - Tighten up padding - Better comments
| // or image file as needed. | ||
| .navbar-toggler-icon { | ||
| display: inline-block; | ||
| content: ""; |
There was a problem hiding this comment.
Properties should be ordered display, width, height, vertical-align, content, background, background-size
|
Here's an updated screenshot and live demo in a JS Bin for folks to play with.
|
|
coool !! thanks |
|
Sweet! Looking forward to implement it on my project. |
By choice; this is easily customized though with a different utility class. |
Following up on #21389, this PR is a WIP for adding the flexbox navbar. It started off as a late night experiment again with
display: table—which was pretty awesome mind you—and got me thinking heavily about flex options. Given we're going all flex now, this approach gets even easier.Still a ton to do, but wanted to open this sooner than later.
Done
.navbar-toggleable-*from the.collapseto the.navbar, making it even easier to toggle content as needed..navbar-toggler-icon, within.navbar-toggler.navbar-center#20766 with ability to center navbar links (with example in docs).navbar-darkto.navbar-inverseto match nomenclature of.bg-inverseand.card-inverse..navbar-lightis still the default class.Todo
.navbar-textis supported and documented properly.