Twenty twelve centred menu

  • Schwanensee

    (@schwanensee)


    11 years, 6 months 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;’

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

    (@esmi)

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

    Thread Starter Schwanensee

    (@schwanensee)

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

    WPyogi

    (@wpyogi)

    11 years, 6 months ago

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

    Thread Starter Schwanensee

    (@schwanensee)

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

    jkaminsky

    (@jkaminsky)

    11 years 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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Hi Joel.

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

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

    jkaminsky

    (@jkaminsky)

    11 years ago

    Thank you Thank you very much

    jkaminsky

    (@jkaminsky)

    11 years ago

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

    rem1xed

    (@rem1xed)

    11 years ago

    Its not centering for me

    http://www.ultimatercruits.com

    portdeco

    (@portdeco)

    10 years, 9 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,

    Scott

    (@olsonsp4c)

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