Breaking Point Burger Menu

Hey schnippel,

You have already set the options via enfold options here:

Best regards,
Jordan Shannon

Hi,

Add this to quick css:

@media only screen and (max-width: 1500px ) {
.av-burger-menu-main { 
     display: block!important; 
}
#top .av_mobile_menu_tablet .av-main-nav .menu-item {
     display: none!important;
}}

Best regards,
Jordan Shannon

Hi,

Did you add the suggested code to the very top of quick css?

Best regards,
Jordan Shannon

Hi schnippel,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

/*Header in sidebar to turn to burger until 1500px*/
@media only screen and (min-width: 990px) and (max-width: 1500px) {
  
        .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img{opacity:1}
        .responsive #top .av_header_transparency .logo img.alternate{display:none;}
        
        .responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}
        .responsive #top #main {padding-top:0 !important; margin:0;} 
        .responsive #top #main .container_wrap:first-child{ border-top:none; }
        .responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; }
        .responsive .phone-info{float:none; width:100%; clear:both; text-align: center;}
        .responsive .phone-info span{margin:0;padding:0; border:none;}
        .responsive.html_header_top #header_main .social_bookmarks ,
        .responsive.html_top_nav_header #top .social_bookmarks { width:auto; margin-top:-16px; } 
        
        .responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }
        .responsive .logo a{display:table-cell; vertical-align: middle;} 
        .responsive .logo img{height:auto !important; width:auto; max-width: 100%; display: block;  max-height: 80px;}
        .responsive #header_main .container{height:auto !important; }
        .responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
        .responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
        .responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
        .responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
        .responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width:  1px;}
        .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
        .responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}
        .responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;}
        .responsive #header .social_bookmarks li{float:none; display: inline-block;}  
        .responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
        .responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
        .responsive .logo img{margin:0;}
        .responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}
        .responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}  
        
        .responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;}
        .responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}
        
        .responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, 
        .responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a, 
        .responsive #top .av_header_transparency #header_main_alternate, 
        .responsive .av_header_transparency #header_main .social_bookmarks li a,
        .responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,
        .responsive #top .av_header_transparency #header_meta, 
        .responsive #top .av_header_transparency #header_meta li,
        .responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}
        .responsive.html_top_nav_header .av-logo-container{height:auto;} 
        .responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}
        
        
      /*new mobile*/
        .responsive .av-burger-menu-main{display: block;}
        .responsive #top #wrap_all .main_menu{top:0; height:80px; left:auto; right:0; display: block; position: absolute;}
        .responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;}
        .responsive #top .av-main-nav .menu-item{display:none;}
        .responsive #top .av-main-nav .menu-item-avia-special{display:block;}
        .responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; }
        .responsive #header_main_alternate{display:none;}
        .responsive #top #header .social_bookmarks{display:none;}
        .responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}
        .responsive #top .av-logo-container .avia-menu{height:100%;}
        .responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;}
        .responsive #top #main .av-logo-container .main_menu{display:block;}
        .responsive #top #main .av-logo-container .social_bookmarks{display:none;}
        .responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}
        .responsive #top #main .av-logo-container .main_menu{display:block;}
        .responsive #top #header_main > .container .main_menu  .av-main-nav > li > a,
        .responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }
        .responsive #top #wrap_all .av-logo-container {padding:0;}
        .responsive #top #header_main > .container .main_menu  .av-main-nav > li > a{
            min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;
        }
        .responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}
        .responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
        background:transparent;
        color: inherit;
        }
        
        .responsive.html_top_nav_header .av-logo-container .inner-container{overflow: visible;}
        .html_header_sidebar #header .container {
          width: 90%;
        }

}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

I’m glad you were able to get this solved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon