In reduced screen size (desktop) menus (3 bars)do not work

[Urban_Management]

We were recently alerted to an issue on our site where, on desktops or tablets, unless the site is displayed full screen, the menu doesn’t work. The menu reduces to the 3 grey bars, but they are unresponsive. It works on phones just fine.
It is difficult to ascertain when the problem happened because we heard about the issue over the course of a few months and thought it was user-error (we have a few older users) or something else. But now know it to be a site problem.
I looked on the forum but can’t see anyone else with the issue on desktops - just mobile challenges.
our URL is urbanmanagement.net
Thanks

[Urban_Management]

UPDATE: I just learned that size matters. At smaller screen sizes it works, but at slightly larger screen sizes it does not - and as you adjust the screen smaller-to-large-and-back, you can see the change. The menus always work at full screen. Thanks,

[ruenel]

Hello @Urban_Management,

Thank you for the details. By default, the mobile menu will only display when the screen size is below 980 pixels. In your case, you have added a custom css so that the mobile menu will display when the screen size reaches below 1200 pixels. Your piece of code is using incorrect selector. Please have it updated and use this instead:

@media (max-width:1200px){
    a.x-btn-navbar{
        display:inline-block !important;
        float:right !important;
    }
    .x-nav-wrap.mobile.x-collapsed{
        display:block;
    }
    .x-nav-wrap.desktop{
        display:none;
    }
}

We would love to know if this has worked for you. Thank you.

[Urban_Management]

Hi - thanks so much for pointing me in the correct direction — I actually removed that entire piece of code and its working fine! I don’t think I need the above code at all - it may have been a ‘fix’ for the menu bar moving down into the image at particular sizes… I’ll start a new question for that. Thank again! Onward and upward

[nabeel]

Hey @Urban_Management,

The above code will activate the mobile menu instead of desktop menu for the screens less than 1200px wide. If the issue is resolved by removing the custom CSS than the above code may not be needed.

Cheers!