Hi again guys, can you please supply a fix to make the off canvas NAv burger menu larger? We really like all the styling options for this but the actual burger menu is really small on the page.
I think it may be a good idea to add some funtionality to the theme settings for 3 differnt sizes burger menus. Not sure how many requests you have had for this but it would be very useful.
/**Top line space taller**/ body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines:before { top: 11px; }
/**Bottom line space taller**/ body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines:after { top: -11px; }
/**Container Wider**/ body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] #top nav ul .slide-out-widget-area-toggle:not([data-custom-color="true"]) a:not(.using-label), .slide-out-hover-icon-effect a { width: 50px; }
Hi again guys, can you please supply a fix to make the off canvas NAv burger menu larger? We really like all the styling options for this but the actual burger menu is really small on the page.
Can we please make it bigger?
Thanks
Dariush
Hey guys, ive managed to do this myself with CSS.
I think it may be a good idea to add some funtionality to the theme settings for 3 differnt sizes burger menus. Not sure how many requests you have had for this but it would be very useful.
Thanks!
CSS below:
/******Burger Menu Bigger******/
/**Lines thicker and longer**/
body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines:before, body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines:after {
height: 3px;
width: 3rem;
}
body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines-button:after {
height: 3px;
width: 3rem;
}
/**Top line space taller**/
body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines:before {
top: 11px;
}
/**Bottom line space taller**/
body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] .slide-out-widget-area-toggle:not([data-custom-color="true"]):not(.mobile-icon) a:not(.using-label) .lines:after {
top: -11px;
}
/**Container Wider**/
body[data-header-search="false"] #header-outer[data-has-menu="false"][data-cart="false"] #top nav ul .slide-out-widget-area-toggle:not([data-custom-color="true"]) a:not(.using-label), .slide-out-hover-icon-effect a {
width: 50px;
}