Добавить в хеадер
<script type="text/javascript">
$("document").ready (function() {
$(".toggle").click(function() {
$( ".menumini" ).stop().slideToggle( "slow" );
});
});
</script>
и
<div class="menuwrapp_mobile">
<nav role="navigation">
<a class="toggle" href="#a"> МЕНЮ</a>
<ul class="menumini">
<div id="menu4"> <?php wp_nav_menu( array( 'theme_location' => 'mobi_menu', 'menu_class' => 'nav-menu' ) ); ?></div>
</ul></nav>
</div>
</div>
в functions.php
// Еще одно меню мобильное
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'twentytwelve' ),
'mobi_menu' => 'Мобильное меню',
));
в style.css
@media (min-width: 768px) {
.container{ width: 750px; }
.mobil{display: none;}
}
@media (max-width: 768px) {
.headmenu {display: none;}
/** Menu Mobile **/
.toggle {
background: url("images/menuicon.png") no-repeat scroll 100% 50% ;
display: block;
font-weight: bold;
/*text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;*/
color: #ffffff !important;
}
.menu4{ }
.menuwrapp_mobile{
margin:0;
position:relative;
border: 0; float: left;
width: 100%;
background: linear-gradient(to left, #ef0202,#0213a2 );
z-index: 999;
border: 2px solid #c5c5c5;
box-sizing: border-box;
}
.mobil{
margin:0;
position:relative;
display: block;border: 0;
}
.nav-menu{ float: left;
padding: 0;
width: 100%;}
ol, ul {
list-style: none;
}
nav[role="navigation"] {
width: 100%;
/* background: #e9a433;*/
display: block;
margin: auto;
font-family: 'Lato', sans-serif;
}
nav[role="navigation"] a {font-size: 22px; color: #232323; text-decoration: none; padding: 0 15px; line-height: 35px; display: block;
font-weight: bold; }
nav[role="navigation"] li { width: 100%;
height: auto;
text-align: center;
/*border: 1px solid #4e4e4e;
padding: 10px 0;*/
background-color: aliceblue;}
nav[role="navigation"] span {font-size: 35px;}
/***********************************************************************/
nav.second {
width: 100%
background: #2980b9;
height: 40px;
display: block;
margin: auto;
font-family: 'Lato', sans-serif;
}
/** Menu Mobile **/
.menumini{
background: none repeat scroll 0 0 #FFFFFF;
/* border: 1px solid #FEBA74;*/
font-size: 18px;
overflow: hidden;
padding: 0;
display:none;
box-shadow: 0 5px 5px -5px #333;
margin-top: 0;
/*margin-bottom: 0;*/
}
.menumini .sub-menu{
background:none;
display:block;
position: static;margin-left: -40px;
}
.menumini li {
border-top: 1px solid #e3e3e3;
/*box-shadow: 0 -5px 5px -5px #333;*/
}
.menumini a {
text-align: left;
/*text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;*/
background-color: #369cf5;
}
.menumini a:hover {
opacity: 0.9;
text-decoration:none;
background:#CB0000;
color: #fff;
}
.menumini .sub-menu a{
padding-left:30px
}
.menumini .sub-menu .sub-menu a{
padding-left:30px
}
}
/** END Menu Mobile **/