Topic: Mobile menu is showing two menus

Lysann
December 2, 2025 at 7:36 am

Hi there,
i created a third menu for mobile and it shows two Hamburger Menus.
Only the third menu is assigned to the Mobile Menu so i don’t get where the second Hamburger Menu is coming from. Could you please check?

Also i want to space the logo a bit from the left side. What is the best way to do that? Via the Customiser or CSS?
Thanks!
Ying
December 2, 2025 at 10:27 am
Hi there,

It’s the secondary nav.
The primary nav is now using your 3rd menu, but the secondary nav is still using the 2nd menu.

You can use CSS to hide it.
```
@media(max-width: 768px) { 
nav#secondary-navigation {
    display: none;
}
}
```
Or try enabling the mobile header at customizer > header.
Lysann
December 2, 2025 at 10:36 am
Thanks! I did it via the customiser and added this code but the Hamburger Menu which moves to the second line. How can i change that?
```
.navigation-branding img, .site-logo.mobile-header-logo img {
	width: 50%;
}
```
Ying
December 2, 2025 at 11:31 am
What’s your purpose of this CSS? To make the logo smaller?
If so, try this instead:
```
.site-logo.mobile-header-logo {
    width: 50%;
}
```
Lysann
December 2, 2025 at 12:25 pm

Thanks, set it to 40% and that’s fine!

Unfortunately the mobile menu is not showing the third menu i created with primary and secondary menu. it only shows the second menu. Only the third menu is set to Off-Canvas, so i don’t get it why it shows only the secondary menu?
Ying
December 2, 2025 at 2:23 pm

I’m not sure I understand your question.

The mobile menu (off canvas menu) is correctly match what you added for the mobile menu at appearance > menu.
https://app.screencast.com/TBVMBsUH160bb
Lysann
December 2, 2025 at 11:33 pm

The third Menu is the Mobile Menu and contains all items from primary and secondary menu (https://imgur.com/AehikmY) but it’s not showing. Only the secondary menu is showing.

Also the Off Canvas Menu has a dark overlay (https://imgur.com/mTeAUdA) which i set differently in the customizer > colours.
Alvind
December 3, 2025 at 4:24 am

Hi there,

I tried checking the issue, but the hamburger toggle for the off-canvas menu isn’t there anymore. Did you remove it?
Lysann
December 3, 2025 at 5:12 am
Hi Alvind,
it’s back now on desktop but not on mobile. The secondary menu is showing on the page “Woningbouw” behind the Hero, when the featured image gets replaced by a video. I used this code:
```
.site-header .main-navigation .main-navigation .main-nav .main-navigation .sub-menu {
    z-index: 9999 !important;
    position: relative;
}
.site-header {
    position: relative;
    z-index: 1;
} 
```
i set the secondary menu to 100% width to have the same width as the parent, but that’s not working either. https://imgur.com/PmRvwE9 on the page Realisaties this is also flowing over the global width: https://imgur.com/LNSvqD0
```
.secondary-navigation ul ul {
	width: 100%;
} 
```
Ying
December 3, 2025 at 8:28 am
The off canvas menu is showing the mobile menu you set, I do not understand what your issue is…
Which menu item is missing?

And your CSS in this reply has a lot of issues; it will not work.
https://generate.support/topic/mobile-menu-is-showing-two-menus/#post-185308

For the last menu item’s sub-menu overflow issue, try this CSS:
```
.dropdown-click .secondary-navigation .main-nav > ul > li:last-child > ul.toggled-on {
    right: 0;
}
```
But can you open new topic for something like this in the future? As it’s not related to your original topic.

Thanks!
Lysann
December 3, 2025 at 10:09 am
Hi Ying,

i don’t know what’s happening but i can’t see it on my end. For not showing on Desktop i will open a new Topic, of course 🙂

The code
```
.secondary-navigation ul ul {
	width: 100%;
} 
```
i got from you and you said i can replace it with 100%. I had it in the Customizer and it worked fine. After deleting it there and putting it in the Theme editor > styles.css it stopped working. Now i added it in the Customizer again and it’s working fine. How can that be?
Ying
December 3, 2025 at 11:11 am

It’s because the CSS files’ enqueued differently.

The additional CSS is placed last in the head area. If the selector has the same priority, the CSS in the additional CSS will override the other CSS.

You can simply change the selector to body .secondary-navigation ul ul to test in child theme styles.css.
Lysann
December 3, 2025 at 1:04 pm
okay, got it. Now with the new selector it works fine, thank you!

But still: i don’t see either the mobile menu nor the logo on mobile. Is that because it’s also hidden behind the hero what we corrected with this code for desktop?
```
.site-header {
    position: relative;
    z-index: 1;
}
```

Ying

December 3, 2025 at 1:56 pm

You have this CSS:

@media (max-width: 1024px) {
    .site-header, #site-navigation, #sticky-navigation {
        display: none !important;
        opacity: 0.0;
    }
}

Lysann
December 3, 2025 at 11:40 pm

I can’t find it. Checked the additional CSS, styles.css and the overrides.css. Then via the Devtools the css from generateblocks and main.css – i don’t find it.
Alvind
December 4, 2025 at 4:39 am

Can you try disabling the Mobile Header option under Customize > Layout > Header?

Viewing 16 posts - 1 through 16 (of 32 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Mobile menu is showing two menus