How to display the responsive mobile menu in wordpress twenty twelve theme.

This article was written by in August 31, 2013, & may not be posted on other sites!
Original source url for this article: How to display the responsive mobile menu in wordpress twenty twelve theme.

How to display menu in wordpress twenty twelve theme for mobile and small devices?
How to display the responsive mobile menu in WordPress Twenty twelve theme? By default the mobile menu in the responsive layout of WordPress Twenty Twelve theme is a dropdown menu.  You can change this with css. You should always create a childtheme in WordPress that overrides the css of the parrent theme and not edit directly into the WordPress TwentyTwelve theme file style.css. This is how to display the mobile menu in WordPress Twenty twelve theme with css:

Display the mobile menu in WordPress Twenty twelve theme, basic code:
@media only screen and ( max-width: 767px ){
.main-navigation div.nav-menu > ul {
display: block;
}
.menu-toggle {
display: none;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display: block;
}
}

Display the mobile menu in WordPress Twenty twelve theme and line up the links under each other:
@media only screen and ( max-width: 767px ){
.main-navigation div.nav-menu > ul {
display: block;
}
.menu-toggle {
display: none;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display: block;
}
.main-navigation li {
float: none;
margin: 0;
width: 100%;
}
}

Display the mobile menu in WordPress Twenty twelve themes and line up the mobile links 2 by 2:
@media only screen and ( max-width: 767px ){
.main-navigation div.nav-menu > ul , .main-navigation ul.nav-menu{
display: block;
}
.menu-toggle {
display: none;
}
.main-navigation li {
float: left;
margin: 0;
width: 49%;
padding: 5px 0;
background-color: #ededed;
border: 1px solid #ffffff;
}
.main-navigation li a{
text-decoration: none;
}
}

How to display the responsive mobile menu in wordpress twenty twelve theme

Spread the word

Facebooktwittergoogle_pluslinkedinmail

2 thoughts on “How to display the responsive mobile menu in wordpress twenty twelve theme.

  1. Patrick

    What can I add to the code if I want more space (like 2 ) between the menu and the page/site ? Thank you for your help !

  2. haxor Post author

    You need to add CSS padding or margin to the bottom of the menu, or the top of the page/site.

Leave a Reply

Your email address will not be published. Required fields are marked *