[Resolved] Navigation Dropdown Click Menu Item: Is it possible to change the bahavior?

[itcwiz]

Hi!

In the documentation you write:

“Click – Menu Item

This option makes it so you have to click the entire menu item in order for the dropdown menu to appear. This disables the parent menu item link, as clicking only opens the dropdown menu.”

I want a different behavior: instead of “This disables the parent menu item link, as clicking only opens the dropdown menu.”, I want to “keep the parent menu item link active, as clicking opens the dropdown menu and opens the parent page”. Is this possible?

[Leo]

Hi there,

Hmm not sure how this would be possible since the page will be refreshed to open the parent link.

Can you find an example of other sites using this?

[itcwiz]

For example https://www.forsthofgut.at

[Leo]

Hmm give this a shot: https://generatepress.com/forums/topic/persistent-submenu-from-parent-page/#post-316529

[itcwiz]

Hi Leo!

Thank you! But this code does not help me in case I want fo “click” on the Menu Item and not on hover. I know this post you reference well, but does not help me …

[Tom]

I’m not really sure I understand – how would clicking a menu item open the sub-menu and load a page at the same time?

Not sure what I’m looking for on the example site you sent over – which menu item?

Thanks!

[itcwiz]

Hi Tom,

If you go on forsthofgut.at and click on “Zimmer”, the page https://www.forsthofgut.at/de/zimmer/ is opened AND the submenu with all the zimmer (rooms) is opened. Then click on the “doppelzimmer” for exampple, and then the page https://www.forsthofgut.at/de/zimmer/doppelzimmer/ is opened. Then click on “zimmer” again and the page “zimmer” is opened again (https://www.forsthofgut.at/de/zimmer/) and the submenu with all the rooms stays open. It is special nice implemented on this page, since they underline the elements in the menu which are active.

In my case petra.it-couture.ch, with generate press, I wanted to use this “click” menu item option, since I don’t want the hover option. The problem is, if I use this “click” option, the parent is disabled. So if I go on this page on “zimmer” then the page http://petra.it-couture.ch/zimmer/ is not loaded (and I wanted it to be loaded), only the submenu (with all the zimmer – rooms) will be opened. If then I click on “kinderzimmer” for example, the page http://petra.it-couture.ch/kinderzimmer/ will be loaded (which is good for me), but then, if I click on “zimmer” again, nothing happens (what I don’t like, I want then the page http://petra.it-couture.ch/zimmer/ to be loaded and that the submenu with all the zimmer (rooms) stays open, simmilar to the page forsthofgut.at).

Thank you!

[Tom]

Hmm, I wonder if you could do something like this (using the hover option):

.main-navigation .main-nav li.current-menu-item .sub-menu,
.main-navigation .main-nav li.current-menu-ancestor .sub-menu {
    left: auto !important;
    right: auto !important;
    width: 100%;
    pointer-events: auto;
    height: auto;
    opacity: 1;
    display: block !important;
}

[itcwiz]

Hi Tom,

Thank you for your answer. It works, but I am not satisfied 100%. the problem is, if I am on the level on the Main menu, I have the hover functionality. So If I am on “Zimmer” and move the mouse over “Familie”, the submenu changes (not on click, as I wanted). If I am on “Zimmer”, then click “Kinderzimmer” and then move on “Familie”, I have the functionality I wanted, since the click on “Familie” will load the Submenu of “Familie” nad will show the page “Familie”. So the only thing I don’t like is the fact that I have the hover functionality on the main manu.

Thank you for your help.

[Tom]

Why is this part of the CSS commented out?:

/*
.main-navigation .main-nav li:hover .sub-menu,
.main-navigation .main-nav li:focus .sub-menu {
    display: none !important;
}
*/

[itcwiz]

Hi Tom,

Because, if you go on the main menu, click on “Familie” and then move the mouse to the right to “verpflegung” and then mothe the mouse down, the submenu starts to flicker, it cannot decide which subpage to load….

[Tom]

Can you remove the CSS comment so I can see?

[itcwiz]

Don’t understand, it is removed … I stored again, please try it again!

[Tom]

Are you using any caching plugins you can clear? It’s still showing as commented out for me.

[itcwiz]

Yes, you are right! I deleted the cache!

[Author]

Posts