Hello, hope everyone is well.
On my client’s demo site I’m trying to replace the text-based Navigation bar with the burger menu from mobile, to essentially mirror https://www.omegaplc.co.uk. Is there a way to do this in X without custom development? I’ve found this code elsewhere on the site:
.x-navbar-inner {
margin-top:-80px;
display:inline-block;
}
.masthead .x-btn-navbar {
display: inline-block;
float: left;
}
.x-nav-wrap.desktop {
display: none;
}
.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile {
display: block !important;
}
.x-nav-wrap.mobile.collapse,
.x-nav-wrap.mobile.x-collapsed {
display: none !important;
}
But this ends up with a burger menu clamped to the far left of the screen rather than respecting the 1200px site width container, and leaves a blank box below the header menu. I’ve also tried the below code, which adds the burger menu button but doesn’t hide the text-based navigation; if I add code to hide that, then of course it also hides the burger menu.
.x-navbar .x-btn-navbar {
display: inline-block;
float: right;
}
.x-navbar .x-btn-navbar:after {
content: 'Menu';
}
Would really appreciate any help that you guys can offer.