Changing when Desktop Menu Break to Mobile

[freedomdesign]

Hi there,

I am looking to do some updates on http://www.evergreen-hakuba.com/en/

I want to add some extra to the menu, which means I need it to break earlier:

I’ve worked out the width of the new menu, and used this code (which I use on other sites):

@media (max-width: 1140px) {
.x-nav-wrap.desktop {
     display: none;
}

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}            
}

@media (min-width: 1141px) {
.x-nav-wrap.desktop {
     display: block;
}    
}

The problem is, when I add this code the menu breaks to mobile at the right time, but nothing happens when I click the mobile button. I had this issue with another site, it was Javascript related and one of your awesome staff helped work out what was wrong.

Changing when Header Nav changes to mobile display?

I will add logins in a Secure Note.

Thanks so much in advance!

[paul.r]

Hi,

Kindly replace your code with the following.

@media (max-width: 1140px) {
.x-nav-wrap.desktop {
     display: none;
}
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}            
x-navbar .x-nav-wrap.mobile {
   display:block;
}
.x-navbar .x-nav-wrap.mobile.collapse {
   display:none;
}
.x-navbar .x-nav-wrap.mobile.collapse.in {
   display:block;
}
}

Hope that helps

[freedomdesign]

Hi, thanks for the reply, but unfortunately I got the same result as the earlier code - it breaks in the right place, but the mobile menu button is broken…nothing happens on clicking it.

[thai]

Hi There,

The previous CSS is missing the dot (.) character.

I’ve already corrected it:

@media (max-width: 1140px) {
    .x-nav-wrap.desktop {
         display: none;
    }
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right;
    }            
    .x-navbar .x-nav-wrap.mobile {
       display:block;
    }
    .x-navbar .x-nav-wrap.mobile.collapse {
       display:none;
    }
    .x-navbar .x-nav-wrap.mobile.collapse.in {
       display:block;
    }
}

Everything should be fine.

Cheers!

[freedomdesign]

Perfect - thanks again!!

[nabeel]

Glad we could help.

Cheers!

[powersnw]

I have the same issues and when I add the code you suggest it doesnt allow the mobile menu to be toggled closed until max-width is 979 px. Can I put a secure note here or will the topic owner see it also?

[thai]

Hi @powersnw,

Please create a separated ticket about your issue.

Thank you.

[powersnw]

Desktop Menu Breaks to Mobile Width Change Issues

[ruenel]

Hey There,

Your new thread has been responded.

Thank you.