Replace desktop nav menu with burger menu

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.

Hi @MCC,

That is happening because of structure limitations. We can adjust it to this but this is still not perfect. The best option is to edit the template or use Pro header builder. Using header builder, we can build it the way we want.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0 !important;
}
.masthead .x-btn-navbar {
    display: inline-block;
    float: left;
    margin-top: -80px;
}
.x-navbar-inner {
     min-height: unset !important;
}

.x-nav-wrap.desktop {display: none !important;}

.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;
}
.x-navbar .x-btn-navbar:after {
    content: 'Menu';
}

Hope this helps. Also note that further customization from here would be getting into custom development that is outside the scope of our support. Thank you.

With a tiny bit of tweaking for colours, this has nailed it perfectly. Thanks so much!

I do have one tiny additional request; if I wanted to add a button on the right-hand side of the navbar (directly opposite the menu), would this be possible? A search icon and contact button ideally. If this is beyond the scope of what you guys can help with, not a problem - I’ll figure it out.

Hi @MCC,

That will require further customization through the child theme since adding an element such as a button to the header area is not possible only with CSS.

Another option would be to do it through Javascript.

Here are some threads that might help:

Hope this helps.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.