Full Viewport Menu Display on Collapse

[richak]

Hello,
I have a burger menu across all screen sizes and I’d like to have the menu take up the whole page during collapse, however, at the moment, it’s preventing me from utilizing the top header part, as well as the sides of the page in order to do so. can you please check on this and let me know what’s going on? thanks

[rad]

Hi @riakhmerov,

Thanks for reaching out.

It’s completely doable, please add this CSS to Theme Options > CSS .

 #x-nav-wrap-mobile {
     width: 100vw;
     position: relative;
}
 #x-nav-wrap-mobile > ul {
     padding: 0px 1vw;
}
 @media (min-width: 1200px) {
     #x-nav-wrap-mobile {
         left: calc( 0vw - ( 50vw - ( 1200px / 2 ) ));
    }
}
 @media (max-width: 1199px) {
     #x-nav-wrap-mobile {
         left: calc( 0vw - ( 50vw - ( 88% / 2 ) ));
    }
}
     

This should serve as a snippet in which we don’t maintain, hence, we can’t provide any maintenance or support.

The 1200px and 88% is the layout setting you applied at Theme Options > Layout and Design.

Thanks!