Make mobile menu permanently visible - no toggle

Support
#1

My client wants all 8 menu items to be visible all the time on mobile. Can you furnish a CSS code that will do that? Basically leave the menu toggled open permanently.

#2

Hello Don,

Thanks for writing in!

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px) {
    .masthead-stacked .x-btn-navbar {
        display: none;
    }
    
    .x-nav-wrap.mobile.collapse,
    .x-nav-wrap.mobile.collapse.in {
        display: block;
        height: auto !important;
    }
}

Hope this helps. Please let us know how it goes.

#3

Hey there - sorry for the delay - I kept trying to add your code in the Additional CSS and of course it didn’t work. So I went in search of the Global CSS and it just isn’t there, under X > Theme Options > Global CSS (http://prntscr.com/evui3r) Suggestions?

#4

Hey Don,

I tested that code and it won’t really work. Before I give you the correct override code, please note that providing override code or custom code is outside the scope of our theme support. With that said, what I’m going to show you will not be supported in case it breaks your site now or in the future. We also will not provide further enhancements to this. Every user should know or learn CSS and the usage of the browser’s element inspector to continue customizing the website using CSS.

The official solution for this is to upgrade to our Pro theme which will enable you to create a custom header.

Below is the correct code that’s to be added in Theme Options > CSS. The Global CSS is not connected to WordPress’ Appearance > Customize > Additional CSS, by the way.

/* Correct Code */
@media (max-width: 979px) {
    .x-nav-wrap.mobile.x-collapsed {
        display: block !important;
    }
    #x-btn-navbar {
        display: none;
    }
}

Provided there’s no syntax errors in your existing custom CSS and you copied the code completely, that code should surely work like shown in the screencast below.

Hope that helps and thank you for understanding.

#5

Wow. I’m not sure what to say.

As usual, my client – as all clients do – is looking at this as a simple problem with a simple solution. I have – counting the time I tiptoed around coding efforts gleaned from various strings before I officially gave up and contacted you – now put in about 4 hours of time when I could have been sleeping.

So I’ll gladly upgrade to the Pro version if that will allow a fix for this request. I for sure don’t want to break the site by fooling around any further in areas where I shouldn’t go.

I have located the link to upgrade along with a tutorial that will – I hope – finally give the client what he wants. Thanks for your time and patience.

#6

Hey Don,

Yep, the client expectation is understandable. This is one of the reasons why Pro was created. We received a lot of header and footer customization request in the past and providing custom code wasn’t feasible for us so providing a header and footer builder is the best solution. Pro Header and Footer building requires extra learning and work for sure but the outcome of that is more possibilities for the website creator.

Thank you for considering the official solution. We have lots of Pro Header Building tutorials available in our Youtube Channel and also our Themeco Docs.

We’ll also help you in case you get stuck with using the Pro builders.

Thanks again.

#7

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