WordPress.org

Ready to get started?Download WordPress

Forums

Twenty twelve centred menu (12 posts)

  1. Schwanensee
    Member
    Posted 1 year ago #

    I centred the menu and title and it seems to work pretty well, except it brakes on iPhone and when using small window-sizes. The "Menu" then button folds under the menu when expanded. Why's that?

    To center the nav I used:

    .main-navigation {
    	position: relative;
    }
    .main-navigation div {
    	display: inline-block;
    	margin: 0 auto;
    	margin-right: 0px;
    }
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border: 0 !important;
    
    }

    And to center the headers i simply used 'text-align: center;'

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Twelve theme. It will be the default theme in WordPress 3.5 and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

  3. Schwanensee
    Member
    Posted 1 year ago #

    Hi Esmi, thanks for the input. All my changes are already made as a child theme to Twenty Twelve but that doesn't really help me solve this problem.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You'd need to post a link to your site for someone to look at your actual code live.

  5. Schwanensee
    Member
    Posted 1 year ago #

    Sure, it's under construction. I'm more of a designer then a coder so have mercy on me. http://www.fridalisa.se

    It looks pretty much the way I want it to in fullsized browsers but it's the scaling that fails. Things seem to get out of place.

    I have commented my changes in the child theme to keep up with what i'm trying to accomplish, it's a bit of a mess with all the !important tags here and there, but i'll sort that out later on. ;)

  6. jkaminsky
    Member
    Posted 1 year ago #

    Hi

    I'm looking for the code in the styles.css and I see it but I put the changes in and it didn't work. Can you guys help me center the menu. http://www.mappawm.com

    Thanks

    Joel

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Hi Joel.

    In your Child Theme or Custom CSS Manager plugin, enter this;

    .main-navigation ul.nav-menu {
     text-align: center;
    }
  8. jkaminsky
    Member
    Posted 1 year ago #

    Thank you Thank you very much

  9. jkaminsky
    Member
    Posted 1 year ago #

    How how do I avoid my drop downs from being centered?

  10. rem1xed
    Member
    Posted 1 year ago #

    Its not centering for me

    http://www.ultimatercruits.com

  11. portdeco
    Member
    Posted 12 months ago #

    The key to understanding how to centre the twentytwelve main menu is to realise that the width of the .main-navigation ul.nav-menu is set to 100%

    If you set the width to 80% it will centre itself. You can reduce ul margins to get more nav options on the same line.

    then move the top and bottom border from .main-navigation ul.nav-menu to .main-navigation which will align the nice grey pencil line top and bottom.

    at least it worked for me. wordpress is awesome

    Obviously as esmi says, edit a child theme not the actual 2012 theme.

    kind regards,

  12. olsonsp4c
    Member
    Posted 11 months ago #

    In order to center the main menu and left justify the submenus, add the following to your child theme's style.css:

    .main-navigation ul.nav-menu {
        text-align: center;
    }
    
    .main-navigation li ul li a {
        text-align: left;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic