Trigger Mobile Menu responsiveness at different resolution

[Dw1ght]

Hey guys! Before posting here, I’ve done my very best to try and do this myself, and while I was able to make the mobile menu responsive at a max-width:1325px, it is, however, unclickable. The clickable part only works at the default mobile resolution (979px), which is much smaller than 1325, but no resolution between the default one (979px) and 1325 lets me click on the Mobile Menu (those 3 lines). I’ve tried this following code, which made the menu responsive at 1325px, but unclickable, so if you can guide me, I’d really appreciate it. Thank you!

Or, if there’s an option where I can simply replace 979px with 1325px, that’d be awesome too! This is the code I’ve tried so far:

@media only screen and (max-width:1325px){
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in,
.x-nav-wrap.mobile.collapsing {
display: block;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: relative;
top: 0;
}
}

[Prasant]

Hello Bogdan ,

Thanks for asking.

It’s not a recommended to change the responsive viewport nature of header that also includes Navigation. More often they create layout and behaviour issues as there are many Javascript code involving the case which will work only on small screens and to make it work in the desktop you will need to rewrite them.

That being said, I would suggest you to use Superfly plugin which can be used to display hamburger/mobile menus even on desktop. You can install Superfly plugin from X > Validation > Extensions.

Here’s the getting started guide that you ca take a look.

Superfly | Themeco Docs

You can take a look at the Superfly website for some demos:

Superfly Demo — Responsive Vertical Menu for WordPress

Thanks.

[Dw1ght]

Heya and thank you for the tip. I’ve installed SuperFly from the X > Validation, however, it’s not activated and it’s still asking me for a purchase code. Is there any way I can validate it still, as part of the X purchase? I have 2 X theme licenses.

[Prasant]

Hello Bogdan,

Thanks for updating the thread.

Actually, there is no need to register SuperFly as it’s already validated. We will be providing all the updates for this plugin. In the activation screen all you need to do is enter your first and last name, then your email as well as described in the provided article.

“On the activation screen you’ll need to enter your email and click on Save Changes entering your first name, last name and subscribing to Superfly’s email newsletters is entirely optional.”

For more information on the validation part, please take a look at Superfly getting started guide. I have shared the link above.

Thanks.