Twenty twelve centred menu

  • 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;’

Viewing 11 replies - 1 through 11 (of 11 total)

  • 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.

    Thread Starter Schwanensee

    (@schwanensee)

    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.

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

    Thread Starter Schwanensee

    (@schwanensee)

    Sure, it’s under construction. I’m more of a designer then a coder so have mercy on me. https://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. ??

    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. https://www.mappawm.com

    Thanks

    Joel

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi Joel.

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

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

    Thank you Thank you very much

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

    Its not centering for me

    https://www.ultimatercruits.com

    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,

    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;
}
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Twenty twelve centred menu’ is closed to new replies.