Bootstrap centered nav menus

I have used the CSS Frameowker Bootstrap now since version 2. Bootstrap 4, as I’m sure you know, is nearing maturity and it was time to rebuild my theme using Bootstrap 4. I wanted to maintain a justified and centred navigation menu. This was easier to do than I had thought.

I build my menus using Bootstrap Navwalker.

wp_nav_menu(array(
    'menu'           => 'main-menu',
    'theme_location' => 'main-menu',
    'menu_id'        => 'navigation',
    'depth'          => 3,
    'container'      => false,
    'menu_class'     => 'nav',
    //Process nav menu using our custom nav walker
    'walker'         => new wp_bootstrap_navwalker()
));

By setting menu_class to nav and making a small CSS change.

ul {
    &.nav {
        width: 100%;
        justify-content: center;
    }
}

You should now have a nav menu that centred!

Read some more on Flexbox and positioning here.

Check out how I got the WordPress menus working properly in WordPress with Bootstrap 4 here. If you are looking for more control over your menus check out how to get Full control over WordPress menus here.