Change mobile breakpoint for left sidebar menu

Hey annevoelkel,

Thank you for the inquiry.

The following css code should adjust the breakpoint of the mobile menu and of the left sidebar or header.

/* header sidebar and mobile menu breakpoint */
@media only screen and (max-width: 768px) {

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

}

Best regards,
Ismael

Hi Anne,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,

Thanks for letting us know, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard