Bootstrap centered nav menus

Categories: Frontend, WordPress

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.


Adam Patterson

Adam Patterson

User Interface Designer & Developer with a background in UX. I have spent 5 years as a professionally certified bicycle mechanic and ride year-round.

I am a husband and father of two, I enjoy photography, music, movies, coffee, and good food.

You can find me on Twitter, Instagram, and YouTube!