Change the Navbar Color or Transparency

There are several included Navbar color schemes to Bootstrap 4. You can specify the background color using the bg- classes: bg-faded, bg-inverse, bg-info, bg-danger, bg-primary, bg-warning, or bg-success. Usenavbar-dark for lighter text color (white), or navbar-light for darker text color (black).

Changing the color of the hamburger icon __ the navbar-toggler-icon is a little trickier. Unlike the old 3.x icon-bar, the navbar-toggler-iconin Bootstrap 4 uses an SVG background-image. There are 2 versions of the image: One for a light navbar .navbar-light, and one for a dark (inverse) navbar .navbar-dark .

So, if you want to change the color of this toggler image, you can customize the SVG image icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke=’rgba(255,102,203, 0.5)’ value in the SVG data…

OFC, another option to just use a different icon from another library (ie: Font Awesome) inside the .navbar-toggler .

Change the Navbar Height (Taller or Shrink)

Thanks to the new spacing utility classes, it’s also easier to change the Navbar height. The Bootstrap 4 Navbar doesn’t have a set height, so it’s rendered height (~54 px) is controlled by the size of the Navbar’s content (brand, links, text, padding, etc..).

The easiest way to change height is to use the padding spacing utility classes to decrease or increase the y-axis (top & bottom) padding. You can change the padding on the entire Navbar element, it’s content or both. The notation works like: {property}{sides}-{size} such as:

OFC, instead of changing the padding, you can simply set the navbar min-height for a taller .navbar:

.navbar { min-height: 80px;}

Taller Navbar Snippet

Bootstrap 4 Navbar Increase Height

Shorter Navbar Snippet

Bootstrap 4 Navbar Shrink Height

Change the Navbar Alignment

Flexbox enables us to easily change the alignment of the Navbar and it’s content (brand, links, forms or text). The default Navbar content is left aligned. Of course there are many other alignment scenarios...

— Brand left (default), links center & right

— Brand center, links left & right

— Brand left and links right

— Brand, links and fill width form input

— No brand, links center & right

— Brand left, links right inside container

— Justified links (fill width) centered

All of these Navbar scenarios have other variations like using container or container-fluid (full-width).

Navbar alignment: Center, right, forms and other examples

Armed with the new Bootstrap 4 flexbox and spacing utilities you can get almost any Navbar layout you need. For example, here is a dual Navbar layout with 2 Navbars. The lower Navbar is controlled by the hamburger toggler in the top Navbar. The icons on the top menu are right aligned to the left of the toggler, and are always visible.