WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to center a menu (3 posts)

  1. skeeterz71
    Member
    Posted 5 months 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>
  2. Scott Fennell
    Member
    Posted 5 months 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.

  3. skeeterz71
    Member
    Posted 5 months 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;
    }

Reply

You must log in to post.

About this Topic

Tags

No tags yet.