Archived topic

Main navigation desktop: Behavior dropdown click menu item

7 replies · Started by Katrin on September 18, 2020

Viewing posts 1–8 of 8

September 18, 2020 at 1:55 am #1448254

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

September 18, 2020 at 8:45 am #1448918

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

January 13, 2021 at 3:52 am #1616775

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

January 13, 2021 at 12:55 pm #1617646

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

January 20, 2021 at 9:22 am #1626685

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

January 21, 2021 at 9:27 am #1628138

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

January 21, 2021 at 11:46 am #1628312

Thank you Tom! It's better now! That's great :)

January 22, 2021 at 9:42 am #1629589

Awesome, glad I could help! :)

This archived topic is closed to new replies.

Start building better websites today.