0
36
2019-01-10

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

Если Вы как и я любите использовать тему Cactus, значит Вам будет интересно узнать способ отображения мобильного меню, для ширины экранов, которая больше 768px. В данном посте я покажу пример CSS для отображения меню.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Если Вы как и я любите использовать тему 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;
    } 

    /* ================================================== */
    /* И дальше погнали добавлять стили для элементов */
}