Always show hamburger menu

[AlmarTjeerd]

Hi guys,

I’m currently working with Theme X (it rocks!) and I want to use the hamburger menu. I’ve added this to the CSS:

/* Enable Mobile Navbar on Desktop */
.x-navbar {
text-align: Center;
}

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

.x-navbar .x-btn-navbar {
display: inline-block;
}

.x-nav-wrap.mobile.collapse.in {
display: block;
}

.x-nav-wrap.mobile.collapse {
display: none;
}

.x-nav-wrap.mobile {
display: block;
}

But my menu is now open at all times and the toggle function doesn’t work. Am I doing something wrong?

Hope to hear from you guys. Thanks in advance!
Cheers!

[ruenel]

Hello @AlmarTjeerd,

I have check the site urls associated with your licenses. None of the sites is displaying the mobile menu. I guess I am check the wrong url. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. There might be some css conflicts which could be the reason why the code did not work.

Regards.

[AlmarTjeerd]

Hi @RueNel,

Thanks for your quick response and I’m very sorry for my late response!

It’s www.studio-solarix.nl.

Hope to hear from you.

Best regards,

Tjeerd

[christian]

Hey Tjeerd,

Sorry for the confusion. We do appreciate that you like X but regretfully, this is not achievable out of the box and also not achievable with CSS override anymore therefore this will require custom development which is outside the scope of our support.

In the past, we have received a lot of request for more header features and having a collapsed navigation in the header is one of them. That request was met by creating Pro. With Pro, you can create a custom header without custom coding. You can display a Navigation Dropdown, Collapsed or Layered element in all or in specific predefined screensizes . I recommend that you upgrade to Pro. I understand you will need to pay extra but custom development is a paid service too and it’s not recommended to hack the theme because:

1. Performance. You’ll be adding extra Javascript on top of the existing Javascript so you’re loading twice unlikr in Pro. Functions in Pro are only used when needed.
2. Future Proofing. Like you encountered now, custom code you get here in the forum were only meant to be a guide and they are not maintainable. We do not support fixing custom code and it is the user’s responsibility to maintain them.

I’m sorry if this would be disappointing to you but that is just a fact.

Thank you for understanding.

[AlmarTjeerd]

Hi Christian,

Many thanks for your elaborate response and support. I understand fully that it’s not recommendable to custom change the theme and I’m aware of the consequences. I’m helping a friend with this website and we were looking into the possibilities. I will advise him to upgrade to Pro!

Many thanks again for your time, help and support.

Have a great day!

Kindest regards,

Tjeerd

[jade]

You’re most welcome, Tjeerd.

Cheers!

[AlmarTjeerd]

Hi guys,

Just a quick question: I’ve upgraded Theme X to PRO like you suggested, but I’m afraid that I screw something up while upgrading. We’re trying to finish the website as soon as possible, but I don’t want to take the risk that anything goes wrong. Could you maybe assist me with setting PRO up and avoid any screw-ups from my side?

Hope to hear from you soon. Thanks in advance!

Kindest regards,

Tjeerd

[mldarshana]

Hi Tjeerd,

The first step is to take a full backup of your site including database and files. You can get an idea how you can backup and restore by following our migration guide here (https://theme.co/apex/forum/t/cornerstone-content-builder-migration/126).

Then you can follow our X to Pro conversion guide here (https://theme.co/apex/forum/t/x-to-pro-conversion/104). One common issue you may experience is that Pro theme does not require Cornerstone plugin. So if you have an active Cornerstone cornerstone plugin, you need to disable and delete it before activating Pro theme.

If you’re using any caching plugins on your website, make sure to purge your server cache and disable any CSS/JavaScript minifications. Also if you’re using any CDN cache like CloudFlare, you need to clear it’s cache as well. Finally, you need to clear your browser cache as well before testing.

Hope that helps.

[AlmarTjeerd]

Thanks for your help :)!

[Prasant]

You are most welcome.