Customising width when menu changes to mobile button

Support
#1

Our site has a large menu with a lot of items, it looks messy when it pushes against the logo and breaks the line.

I have the following code to force the menu to switch to mobile display, which I got for my site in an earlier thread:
https://theme.co/apex/forum/t/changing-when-header-nav-changes-to-mobile-display/8904/4

The issue, which I believe is since updating the theme, is that the menu does break to mobile, but the button doesn’t work until the browser width is reduced to around 940 pixels.

You can see what I mean in this 30 second screen capture video:
https://www.useloom.com/share/63f7ffda2fcd410791fba1e9e623ccf8

It could be javascript related, as that was the issue with the menu of another site, but I don’t know enough about javascript to be sure.

The site URL is
http://www.evergreen-hakuba.com/

I will provide site logins in a secure note.

Thanks in advance for your help!

#2

Hi There,

To fix this issue, please also add this custom CSS:

@media (max-width: 1195px){
    .x-nav-wrap.mobile {
        display: block;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
}

Let us know how it goes!

#3

Perfect! Thank you!

1 Like
#4