Customizr Mobile Menu Always Open

Followup – It is only happening on Android devices.

What do you mean with “always being open”? Do you mean that menu items aren’t visible but still clickable? If yes, adding this css changes anything?

@media (max-width: 979px){
    .nav-collapse, .nav-collapse.collapse .nav{
        display: none;
    }
    .nav-collapse, .nav-collapse.collapse.in .nav{
        display: block;
    }
}

No. What I mean is that when you land on any page, the main menu is already expanded and will not close/minimize.

Mmm I went on your page with a samsung tablet (galaxy tab 3 t-310) and the menu isn’t expanded, both with default browser and chrome.

Well that is good news. That eliminates the tablets (hopefully). I have had two people test it right now and they tell me that on their android mobile phone (mine included Motorola MB860) it is still having the issue.

You can exclude samsung galaxy s3 mini also, android 4.1.2 (just tested)
Do you have the same problem with the demo site? https://demo.themesandco.com/

Yes. The demo is showing up with the menu expanded and it wont minimize either.

Mmm very old android version so.. like 2.2?
Out of curiosity did you try the code I suggested above (even if it contains two compensatory typos :D)?
Just this should work:

@media (max-width: 979px){
    .nav-collapse.collapse .nav{
        display: none;
    }
    .nav-collapse.collapse.in .nav{
        display: block;
    }
}

Let me know.
p.s.
don’t exactly remember why I wrote that other code before

OK Good! That worked to load the pages with the menu collapsed. But, now the menu wont open when pressed.

FYI – I did not try the first code.

You are awesome! I now tried the first code and it fixed it. I really appreciate all the time you spent to help me.

The fix – place code in proper inc/assets/css skin stylesheet or appropriate child theme location:

@media (max-width: 979px){
    .nav-collapse, .nav-collapse.collapse .nav{
        display: none;
    }
    .nav-collapse, .nav-collapse.collapse.in .nav{
        display: block;
    }
}

what? the above code worked? and the other one doesnt?
Good to know. So the correct code should be:

@media (max-width: 979px){
    .nav-collapse.collapse .nav{
        display: none;
    }
    .nav-collapse, .nav-collapse.collapse.in .nav{
        display: block;
    }
}

Could you make this other test please?

The following code works when I placed it in the theme color stylesheet (i.e. – /customizr/inc/assets/css/blue3.css) at the end of the Components: Nav section.

@media (max-width: 979px){
    .nav-collapse.collapse .nav{
        display: none;
    }
    .nav-collapse, .nav-collapse.collapse.in .nav{
        display: block;
    }
}

thank you very much for this test.
Anyway I suggest you to use the child-theme’s stylesheet, or the custom css box you can find in Customize -> Advanced options -> Custom CSS
in order to not lose your changes when upgrading the theme.

Got it. Thanks again!

You’re welcome! ??