How to enable Hestia mobile menu on larger screens

The mobile menu in Hestia appears on screens lower than 769px.


Hestia Desktop Menu


Hestia Mobile Menu

Showing it on larger screens is possible by adding the following code to the Additional CSS editor within the Customizer. Feel free to change the value of 900px to the desired one.

/* Themeisle Support - change menu mobile breakpoint */
@media only screen and (max-width: 900px) {
    .navbar-toggle {
        display: block;
    }
    #main-navigation {
        margin-top: 70px;
        padding-bottom: 15px;
    }
    .navbar.navbar-default .navbar-brand {
        color: #555;
    }
    .header > .navbar, .navbar.navbar-fixed-top .navbar-collapse {
        background-color: #fff;
    }
    .navbar-nav {
        float:none;
    }
    .navbar-collapse.collapse {
        display:none !important;
    }
    .navbar-collapse.collapse.in {
        display:block !important;
    }
    .navbar.hestia_left .navbar-nav {
        display: block;
        width: auto;
        float: none;
    }
    ul#menu-primary-menu li {
        display: block;
        float:none;
    }
    ul#menu-primary-menu li a {
        color: #000;
    }
    .navbar-toggle-wrapper {
        right: 20px;
        position: absolute;
        top: 25px;
    }
    .navbar.navbar-fixed-top .navbar-collapse {
        max-height: calc(100% - 70px);
        margin-top: 70px;
        overflow-y: auto;
        position: fixed;
        z-index: 9999;
        background: #fff;
        width: 100%;
        left: 0;
        top: 0;
        margin-left: 0;
        margin-right: 0;
        -webkit-overflow-scrolling: auto;
    }
    .navbar.navbar-transparent>.container {
        padding-top: 25px; !important;
    }
    navbar.navbar-default.navbar-transparent li:not(.btn):hover > a, 
    .navbar.navbar-default.navbar-transparent li:not(.btn):hover > a i, 
    .navbar.navbar-default.navbar-transparent .navbar-toggle:hover, 
    .navbar.navbar-default .responsive-nav-cart a:hover .navbar.navbar-default .navbar-toggle:hover {
        color: #e91e63 !important;
    }
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us