Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается.
Трансформируем меню в иконку
Стандартный код вывода меню
<nav id="topmenu" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> </nav>
CSS
#menu-icon {
color: #fff;
padding: 0 10px;
line-height: 50px;
cursor: pointer;
display: none;
position: absolute;
top: 0px;
right: 0px;
}
#menu-icon:hover {
background-color: #032f5e;
}
@media (max-width:480px) {
#menu-icon {display:block;}
.menu-head-menu-container /* контейнер меню, класс может отличатся */ {
width: 80%;
background-color: #111;
float: right;
margin-right: 80px;
display:none;
}
}
Script
jQuery(document).ready(function($){
// prepend menu icon
$('#topmenu').prepend('<div id="menu-icon">Меню</div>');
// toggle nav
$("#menu-icon").on("click", function(){
$("#menu-main-menu").slideToggle();
$(this).toggleClass("active");
});
});
Обоснованность данного способа
Данный способ подходит для простой верстки. В последнее время делаю немного по другому: отдельно вывожу иконку в том месте, где нужно, которая отображается только в мобильной версии. При этом меню наоборот скрывается (в моб.версии) и раскрывается относительно всей шапки (position: absolute;) по нажатию кнопки МЕНЮ.
Мобильный поиск
То же самое делаем с поиском. Добавляем невидимую в десктопной версии кнопку поиска, которая появляется в моб. версии (поиск при этом исчезает).
Скрипт:
// toggle search
$("#search-button").on("click", function(){
$("#searchform").toggleClass('searchform-open');
$(this).toggleClass("active");
$('#s2').focus();
});
Стили кнопки и открытого поиска:
#search-button {
background-color: #0990dd;
color: #fff;
text-align: center;
cursor: pointer;
padding: 8px;
font-size: 18px;
display: none;
}
.searchform-open {display: block !important; top: 55px;}
