-
flyairea
Hello community!
I recognized a problem when creating a new “Test” Start page with my menu.
When I make the first container fixed (like described here: https://generate.support/topic/background-attachment-fixed-glitchy-on-safari/) sometimes the menu suddenly disappears when I hover over a Menu button which has a Sub-Menu.How to see the problem:
https://www.flyairea.com/teststart2/Scroll down and up fast with the mouse wheel and hover over “Shop” or “Wetter” or anything what has a Sub-Menu.
The problem does not appear when scrolling slowly down and up.I recognized already the following when inspecting the site:
<nav class="auto-hide-sticky has-branding has-sticky-branding wc-menu-cart-activated main-navigation nav-align-center has-menu-bar-items sub-menu-right stuckElement" id="site-navigation" aria-label="Primär" itemtype="https://schema.org/SiteNavigationElement" itemscope="" style="transform: translateY(0px);">The part
style=”transform: translateY(0px);” is added when fast scrolling up and down. And this let’s the Menu disappear.When the page is scrolled down a little more and just a few steps are scrolled up again, the Menu is shown again. Then the problem does not happen because I guess the menu position is set to fixed and the z-index is given automatically 10.000.
Do you have any idea what I can do to not have this menu problem?
Thanks in advance!
Emanuel
-
Hi there,
Can you go to customizer > sticky navigation, check if you’ve toggled the Hide when scrolling down option?
Let me know 🙂
-
flyairea
Hello Ying,
yes this option is on. I recorded a video to show what i mean with the disappearing.
https://ik.imagekit.io/y1gomy3s1/Screenshots/menu_disapear.mp4?updatedAt=1761598526909
Emanuel
-
Thanks for the video, but I can not replicate the issue on my computer.
Which browser are you using? What is the version? And what is your computer system? Windows or OS?
Let me know 🙂
-
flyairea
I’m on Windows 10. Seeing the problem in Firefox 128.0 (64 bit) and as well on Chrome Version 141.0.7390.123 (Offizieller Build) (64-Bit)
Same on the other PC, Windows 11, same chrome version.Also on my tablet i can make the mistake (Android 12) when i slide down and up fast and press on the search icon. Same on my mobile (Android 15).
I guess it has something to do with the fixed container. If I switch it to scroll, the problem is not there. Seems like the menu is hidden behind the fixed container somehow.
-
flyairea
Found out something additional:
When i go to “inspect site” and add.main-navigation { position: relative; }the problem is not any more there.
But I’ve added it also to the customizer now to additional css and when reloading the page, I don’t see the change. -
flyairea
Needed to add all of this at the end and now I don’t see the problem anymore:
.main-navigation { z-index: 100; padding: 0; clear: both; display: block; position: relative; }Why the problem is caused: When scrolling up fast, not the sticky scroll up navigation is displayed but the main navigation. And there the position property is static by default and not relative because in the main.min.css the position:relative; is not added.
I just don’t understand, why I needed to repeat all and not just
.main-navigation { position: relative; }Update: The cache and cookies… All working now 😉
-
Great! Glad you’ve fited it out 🙂
- You must be logged in to reply to this topic.