How to center a menu

  • Resolved skeeterz71

    (@skeeterz71)


    10 years, 1 month ago

    Hi,

    Does anybody know how to center a menu when you don’t know the width? margin: 0 auto requires a width declaration. Because the menu can grow and shrink depending on the menu items I don’t know the width. It also needs to be responsive. text-align center isn’t working either.

    My div and container. If anybody can help. Thanks.

    <nav id="footer-navigation" class="footer-navigation" role="navigation">
			<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
    </nav>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Scott Fennell

    (@scofennellgmailcom)

    10 years, 1 month ago

    I don’t think margin 0 auto requires a width declaration in all cases. In any event, I would try giving the list items display inline-block; float: none; and give the parent text-align: center.

    It would be helpful if you provided a link.

    Thread Starter skeeterz71

    (@skeeterz71)

    10 years, 1 month ago

    Thank you. You were right on target. Unfortunately the site is on localhost so I am not able to provide a link. Here is what I ended up doing after a little firebug inspection and now have it centered perfectly.

    #menu-footer{
	border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
#menu-footer li{
	display:inline;
}
#menu-footer a{
	display:inline-block;
    padding:10px;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to center a menu’ is closed to new replies.