Okay
  Public Ticket #2418565
Make Burger Menu Larger
Closed

Comments

  •  3
    Lucas-media started the conversation

    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 

  •  3
    Lucas-media replied

    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!

  •  3
    Lucas-media replied

    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;
    }