In this article
.navbar-dark for light and dark navbars, respectively.
These classes ensure that
.nav-link elements adopt colors appropriate to the background color of the
Alternatively you can apply your own colors using utilities like
.navbar-toggle to display an animated, hamburger-style menu toggle on small screen sizes.
.navbar-brand on the link containing your logo to ensure that it inherits the appropriate color scheme. This is important when using an inline SVG as your logo with the
If you choose to use titles or badges alongside your logo, you can align these using flex utilities like
.nav-menu on a
.nav element to create a menu for display on small screen sizes. The menu can be shown and hidden using the Collapse plugin.
By default, the menu slides down from the navbar when the menu toggle is clicked.
Two additional styles are available in the
_nav-menus.scss Sass partial:
- An off-canvas menu which slides in from the left-hand side of the screen
- A full-screen menu which scales into view