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

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

[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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts