Desktop Menu Breaks to Mobile Width Change Issues

[powersnw]

I have added the code to change the width at which the Desktop Menu changes to mobile however the button is not responding and opening the mobile menu until 979 px is the width.

@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;
}
}

[ruenel]

Hello There,

Thanks for writing in! Please have your code updated and use this:

@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.x-collapsed {
display:none;
}
.x-navbar .x-nav-wrap.mobile.collapse.in {
display:block;
}
}

Hope this helps. Kindly let us know.

[powersnw]

Awesome, that makes the button function now. However the menu now drops down and is layered over the webpage. At 979px it breaks differently when opened it pushes the webpage content down below the menu items. Is this normal?

[paul.r]

Hi,

Kindly change the code to this.

@media (max-width: 1140px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
     height: auto;
}
.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.x-collapsed {
     display:none;
}
.x-navbar .x-nav-wrap.mobile.collapse.in {
     display:block;
}
}

Hope that helps.