Change width to activate mobile menu insteas of regular menu - Support

Hey arthurvancadsand!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}

Cheers!
Yigit

April 5, 2015 at 4:18 pm #423660

I used this solution up until the latest theme update when I found it triggered the mobile menu bug that others have experienced, where the menu appears to the right of the site. Any alternative solutions?

April 6, 2015 at 6:09 am #423790

Rikard

Hi @willhendy!

Could you provide us with a link to the site in question so that we can take a closer look please?

Best regards,
Rikard

April 6, 2015 at 10:41 am #423861

Hi Rikard,

Thanks for your quick reply. You can see this at what3words.com/es (I have removed it from the other languages for the time being).

April 6, 2015 at 1:28 pm #423905

Yigit

Hi!

Can you please flush browser cache and refresh your page a few times? I see that issue has resolved on your website.
P.S.: You are currently using Enfold 3.1.2, please update it to 3.1.3 – http://kriesi.at/documentation/enfold/updating-your-theme-files/

Cheers!
Yigit

April 7, 2015 at 8:41 am #424514

Hi Yigit,

I have done as you suggested but it remains a problem. Please note it’s only at /es not any other language. http://i62.tinypic.com/68su1y.png

April 7, 2015 at 1:42 pm #424657

Rikard

Hey!

You must be getting cached results because your site looks great on my end on both languages, could you try a different browser or machine maybe?

Best regards,
Rikard

April 7, 2015 at 3:22 pm #424734

Sorry guys I’m 100% sure it’s a problem. It looks fine if you just load the site but if you scroll right on the spanish site when using a mobile device and you will see the issue. Alternatively just pinch zoom out after what3words.com/es has loaded and you will also see it. Do it before you press the menu button. I have tried on several browsers on several computers and devices, both iOS and Android.

April 7, 2015 at 9:20 pm #424952

Elliott

Hey!

That should be fixed in the later versions. Your using 3.1.2 it looks like. Update to 3.1.4 and clear your cache. If that does not fix it then try adding this to your custom CSS.

@media only screen and (max-width: 767px){
    .responsive.html_header_sidebar #top {
        position: relative;
    }
}

Cheers!
Elliott

February 14, 2018 at 2:32 pm #912270

Hi,

I have chosen “Activate for Smartphones and Tablets (browser width below 990px)” option in the enfold themes option and it doesn’t work.

I continue to see as if I had the “Activate for Smartphones (browser width below 768px)” option.

What can it happen?

February 15, 2018 at 4:44 am #912600

Rikard

Hi Empatica,

Could you post a link to the site in question so that we can take a closer look please?

Best regards,
Rikard

February 15, 2018 at 12:53 pm #912731

Inici

February 17, 2018 at 5:39 am #913479

Victoria

Hi Empatica,

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, but then you need to decide what to do with the widget: hide it or try to adjust.


@media only screen and (max-width: 990px) {
  
        .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

February 19, 2018 at 10:37 am #914186

Hi,

Thanks, this code work correctly.

Now, can you help me to hide the widget below 990px.

Thanks.

February 19, 2018 at 4:08 pm #914348

Victoria

Hi Empatica,

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


@media only screen and (min-width: 768px) and (max-width: 1023px){
  #header .avia-custom-sidebar-widget-area {
    display: none;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

February 19, 2018 at 5:21 pm #914403

Perfect! Thanks for all.

Regards,

Jordi

February 19, 2018 at 9:01 pm #914531

Basilis