how to center menu in twenty-eleven theme

  • Resolved Grimm Ales

    (@grimmale)


    11 years, 5 months 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

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

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

    WPyogi

    (@wpyogi)

    11 years, 5 months 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.

    Thread Starter Grimm Ales

    (@grimmale)

    11 years, 5 months 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.

    Thread Starter Grimm Ales

    (@grimmale)

    11 years, 5 months 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?

    WPyogi

    (@wpyogi)

    11 years, 5 months 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.

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

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

    Thread Starter Grimm Ales

    (@grimmale)

    11 years, 5 months ago

    THANK YOU WPYOGI!!!!!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘how to center menu in twenty-eleven theme’ is closed to new replies.