Centering the main menu

#1

it seems as I work down the theme, i hit an obstacle on each bit of styling. excuse me as when i’ve solved it once, I learn fairly fast, so excuse the ignorance!

I am trying to get the menu to display centrally.

    <section class="black">
    <div class="container">
  <nav class="collapse navbar-collapse" role="navigation">
    <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
      endif;
    ?>
  </nav>
</div>
</section>

similar to the image ive tried float:none and text-align:center on various classes but its sticking there!
any suggestions?
thanks in advance!

#2

There’s a justified nav in the Bootstrap examples. There were other workarounds proposed, so it may be worthwhile searching through the issues in the Bootstrap repo too.

3 Likes
#3

Use Chrome or Firefox to see how large the containers or divs you are looking at are. You probably need to remove the floats on the nav links, then make sure the container is 100% width.

If you want each link to be the same size, a cool trick is display: table on the container of the navs and display:cell on the list elements. Playing with that can give you a very nicely balanced full-width navigation.

1 Like
#4

Ill play a bit more, - i didnt try the 100% though its nested in a bar that spans the page.

.navbar-nav{
width:100%;
}

has fixed the issue. thanks!