WordPress.org

Forums

[resolved] how to center menu in twenty-eleven theme (8 posts)

  1. Grimm Ales
    Member
    Posted 2 years ago #

    Please please help...
    I'm trying to center the menu on my website, and I can't find anything that works. I have a child theme, and I tried altering the margins and padding for the menu. When I do that, the menu is changed from a horizontal orientation to a vertical orientation.

    How can I center the menu while keeping it in a horizontal orientation?
    Here's a link to the site:

    Thanks

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    For CSS-specific issues, post on CSS-specific forums.

    Further reference http://www.w3.org/Style/Examples/007/center.en.html

  3. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You'll need to set a width on the #access div - and then use the margin: 0 auto; which centers the block element. One thing to be aware of is that if you add more menu items, you'll need to adjust the width.

  4. Grimm Ales
    Member
    Posted 2 years ago #

    Hmmm... I was hoping that there would be a simple solution. I'm new to wordpress and css, and I really have no idea what I'm doing. I thought that it would be best to post in the wordpress forums in order to get help altering the theme. The css sites that you link to are a bit daunting.

  5. Grimm Ales
    Member
    Posted 2 years ago #

    Oh, thanks WPyogi!
    I just tried setting a width and altering the margins for #access div. It doesn't seem to have changed anything though. Any other ideas?

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    What you added is incorrect CSS:

    #access div {
        margin: 0 auto;
        width: 1000;
    }

    That applies to any div that is inside an element with the id of access. What you need is just #access. And width always has to have a unit of measure unless it is 0 (zero). But what you also need to do to center it is to use the minimum width of the element you are centering -- say maybe 500px in this case.

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You also need to remove the float by adding float: none;

  8. Grimm Ales
    Member
    Posted 2 years ago #

    THANK YOU WPYOGI!!!!!!

Topic Closed

This topic has been closed to new replies.

About this Topic