TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Cactus – Как отобразить мобильное меню для своей ширины экрана через CSS

1 063

Если Вы как и я любите использовать тему 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; } /* ================================================== */ /* И дальше погнали добавлять стили для элементов */ }

Источник записи:

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее