[Resolved] Navigation dissappears when i have Submenu

[Oliver]

Hello, i followed the steps to use my navigation as header like shown here.

It works fine until i add submenu-items like in the menu-Item “Unternehmen” on my website. Then the Menu-Header starts to flicker or disappears at all, especially when i klick on a submenu-item or scroll the page down. How can i fix this?

Note: The Issue only happens when the submenu opens on mouseover, not when it is set to “click on menu item”.

GeneratePress 2.1.4

GP Premium 1.7.2

[Oliver]

Note: The issue only appears in google chrome…

[David]

Hi there,

it doesn’t like the Elementor created Heading Overlay you have, probably because of the negative margin used to move it up the page. If i remove the negative margin or force it off the page then the problem goes away.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Oliver]

Yes, you are right! I found a workaround: I removed the overlay-effect and added a transparency to the title instead, now it works even with the negative margin. Thanks a lot for your great and very helpful support!

[David]

Thats great. Glad i could be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pete]

Sorry. I have the same issue, but don’t understand the overlay fix?

[David]

Hi there

would you mind raising a new topic where you can share a Site URL privately. We can then give you 100% attention.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pete]

I’m developing locally.

[David]

We’re gonna do a lot of shooting in the dark to diagnose without being able to see the site.

Are you also using Elementor to create the content below the navigation ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pete]

Yes. My merged menu (transparent) is a header element over smart slider 3 laid out with elementor. My issue is the same as described above. As soon as I added sub menus w/ rollover, the menu flickers on and off and sometimes disappears altogether. If I change to click to display or remove the sub menus it goes away. I use this to position my menu where I want it:

.main-navigation ul {
padding-top: 10px;
}

.main-nav {
position: relative;
top: 20px;
}

[David]

Try increasing the z-index of the merged header with this CSS:

.header-wrap {
    z-index: 10000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pete]

Hmmm. Well it worked, but then I deleted the css you gave me and it still worked (all caches cleared). I wonder if toggling on and off the hover function reset it? Weird. Thank you for your help. I may come back to this topic if it acts up again – and the site is live and you have something to look at. Thanks for the help.

[David]

No problem glad to hear its resolved ( for now 🙂 )

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts