Cactus – Как отобразить мобильное меню для своей ширины экрана через CSS
Если Вы как и я любите использовать тему Cactus, значит Вам будет интересно узнать способ отображения мобильного меню, для ширины экранов, которая больше 768px. В данном посте я покажу пример CSS для отображения меню.
Cactus отличная тема которая помогла мне создать ни один сайт, а множество. Дочерние темы для Cactus в основном создаются на легке и даже с удовольствием. Тема обладает хорошей адаптивностью и в основном работа над версткой связана с уникальными элементами страницы.
Теперь собственно почему мы здесь все собрались. В данном посте я предлагаю свое решение для того чтобы отобразить мобильное меню в зависимости от нужд проекта и ширины экрана. Естественно что css-код предложены мной необходимо “подогнать” в соответствии своим требованиям.
/* Отображаем моб меню до 1000 px*/
@media screen and (min-width: 768px) and (max-width:1000px) {
/* Показываем мобильное меню */ .cactus-mobile-main-header {
display: block;
}
/* Показываем мобильное меню */
.cactus-header .cactus-main-header {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
}
/* Скрываем ПК меню */
.cactus-main-header {
display: none !important;
}
/* Показываем стрелку субменю в моб. меню */
.menu-expand {
display: block !Important;
padding: 0 10px;
cursor: pointer;
position: absolute;
right: 10px;
}
/* Выделение пунктов меню */
.cactus-mega-menu > .sub-menu > li{
font-weight: 800 !important;
padding-bottom: 10px;
}
.cactus-mobile-main-nav > li > a{
font-weight: 800 !important;
}
/*Отменяем фиксированное меню */
div#SDStudio_Fixed_Menu {
position: relative !important;
display: none !important;
}
/* ================================================== */
/* И дальше погнали добавлять стили для элементов */
}