How to enable Hestia mobile menu on larger screens
The mobile menu in Hestia appears on screens lower than 769px.
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; } }