[Resolved] Main navigation desktop: Behavior dropdown click menu item

[Katrin]

Hey there,

I changed the behavior of the main navigation dropdown sub menu in desktop version. I used the tips you gave here: https://generatepress.com/forums/topic/navigation-dropdown-click-menu-item-is-it-possible-to-change-the-bahavior/

I reached the aim, that the submenu of the main navigation opens only on click (not mouseover) and at the same time opens the main site of the navigation item. On the sites of the sub menu the sub menu dropdown is not shown. The behavior I wanted works. The click behavior is comparable with the behavior on Apple’s website.

The only issue: the loading is not nice at all. If I click on a menu item, it takes a lot of time to open the new sub menu dropdown and the new page is loaded with an even bigger delay. I would love it to load faster and simultaneously. Is there a way to fix that?

Here is my CSS, changing the behavior:

.main-navigation .main-nav li.current-menu-item .sub-menu,
.main-navigation .main-nav li.current-menu-ancestor:not(.sub-menu)
{
	  left: 0px !important;
	pointer-events: auto;
  height: auto;
  opacity: 1 !important;
}

@media (min-width: 1025px) {
.dropdown-hover .main-navigation ul li:hover > ul {
    opacity: 0 !important;
}
}

Best regards,
Katrin

[Leo]

Hi there,

We can’t change how fast things load with CSS unfortunately.

I just tested the page and everything loads fast and together to me:
https://www.screencast.com/t/lKlNWrxrv7vN

[Katrin]

Hey,

Sorry for my late answer! I still didn’t figure out about that.

Maybe this is an issue of my internet. For me sometimes it works an the new tab and sub navi load simultaniously and sometimes the next sub menu already opens, when the old one is not closed and the new page is not loaded yet. You don’t have an idea where this could be caused?

But also I want to change the behaviour, when it comes to scrolling. The main menu is disappearing, when scrolling down, only popping up again when scrolling up. The submenu is shortly disappearing too and than showing again. It would be perfect when its only shown when scrolling up again. Is there a way to do that?

Thank you!
Katrin

[Tom]

Are you wanting the sub-menu to show only when the page loads that has sub-menu items instead of having it show right away when clicked?

For the other issue, try this:

.main-navigation.navigation-stick:not(.sticky-nav-scrolling-up) .main-nav li.current-menu-item .sub-menu {
    opacity: 0 !important;
}

[Katrin]

Thanks Tom,

The second issue is perfectly solved 🙂

About the other issue: I feel like it would give a more nice experience, since otherwise it could happen, that both submenus are seen in the same time. But it only happens, when sometimes. I guess when there are loading issues for any reason.

Would it make sense to change the behaviour of the sub-menu or would this be worse to understand for search engines? Most important is, that the page is lightweight and fast loading.

If you think, that changing the sub-menu to open with the page makes sense, than yes, I would like to change that.

Thanks a lot for you amazing support!
Katrin

[Tom]

Can you try adding this CSS to see if it improves things?:

.main-navigation:not(.toggled) ul li.sfHover>ul, 
.main-navigation:not(.toggled) ul li:hover>ul {
   opacity: 0;
}

[Katrin]

Thank you Tom! It’s better now! That’s great 🙂

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts