Mobile menu not working on desktop on wide widths

Support
#1

Hi X. I am by far happy about this theme - and I think it’s the easiest customizable theme out there.

Anyways. Here’s my URL:

On mobile and small widths the menu (dropdown) works totally fine, however on desktop and larger widths it is not responding (the menu icon gets white). Do you have any knowledge on what could cause this issue. I will try figure it out myself until then. Hope you can maybe help me with this issue.

Best
Philip Anker

#2

Hi Philip,

By default, desktop menu display on 980px screen width and up. Mobile menu button display on 979px and below. Then you have hidden both desktop menu and mobile menu on 1280px and below. See this: https://screencast-o-matic.com/watch/cbie2ylldY
Is this your intention to hide both mobile and desktop menu? If not please clarify so we can help you better.

#3

Yes. I’m sorry. Let me elaborate. It seems weird cause this issue is very new, and has not been there before now. No code or anything has been changed. But the problem simply is that the mobile-menu is not working on desktop width. All above issue has been intentional. Nothing else.

The desktop menu (traditional text menu) should be hidden at 1280px (I have now changed it to 1080px), otherwise it jumps a line so that it looks messy. Therefore I want the mobile-menu (hamburger) to substitute the traditional one. And it does, and looks it fine. But for some reason the mobile-menu only works on 980px and below. It simple doesn’t respond on widths above, and when clicking it, it is suddenly hidden (white). Hope it makes sense. I just want the mobile menu to work on desktop.

#4

To make it a bit more simple.
What I try doing (because the text menu is long) is changing the default desktop menu display on 980px screen width and up to 1080px, and the mobile menu button display on 1079px instead of 979px. Now it shows correctly, but the mobile menu is simply not responding from 980px to 1080 (it won’t dropdown). Some code must conflict this, that is what I’m looking for.

Best
Philip

#5

Hi Philip,

Thank you for the clarification.
For the missing, mobile button, please update this custom CSS:
.x-btn-navbar.collapsed { background-color: none; color: rgb(122, 113, 90); } .x-btn-navbar.collapsed:hover{ background-color: none; color: rgb(122, 113, 70); } .x-btn-navbar:hover{ background-color: none; color: rgb(122, 113, 90); } a.x-btn-navbar { margin-top: 15px !important; }

To this:
.x-btn-navbar, .x-btn-navbar:hover { margin-top: 15px !important; color: rgb(122, 113, 90); }

I can see the issue that is not responding on that screensize. We’re sorry for the inconvenience. I have forwarded this to our developer for investigation. We will let you know once we have an update.

#6

Hopefully it’s only on those 200px which affects a very few screens. I’ll see if I can try fixing it somehow myself. Write me when you have an update, and thank you for your help. It is appreciated.

Best
Philip

#7

You’re welcome! :slight_smile:

#8

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