Hi there,

You could consider displaying them horizontally like this maybe?
https://generatepress.com/forums/topic/submenu-fixed/#post-1048248

Hi Leo

the idea is certainly good, but unfortunately the code does not work like that. The post is from 2019, maybe something has changed in the meantime, so you can't use it like that today.

The only thing that happens is that the layer becomes wider.
Before: https://prnt.sc/ir2xvRHexPDU
After: https://prnt.sc/zFHsS_xEwpIM

But the submenu is still displayed vertically, and on the "current pages" the layer is not shown at all. (the post describes that the layer is always displayed under the menu): https://wp01.pixelhof.de/portfolio/botanicals/

Hi Stefanie,

I see. Can you remove those codes first? We'll try to see what code is more appropriate.

Hi Fernando,

thanks for support!
Yes, I removed the code now.

Thank you!

Can try something like this, and see if it works for you?:

div#primary-menu > ul.menu > li > ul {
    display: flex;
    width:500px;
    overflow-x:scroll;
}

div#primary-menu > ul.menu > li > ul a{
    white-space: nowrap;
}

This sets the submenu to display horizontally with a scroll.

thank you!

But the scrollbar looks very technical and does not fit to this delicate photography site. But I see, it's not so easy...
Maybe I need a plugin like max mega menu or something?

Hi there,

I have now found this post in the forum and successfully changed the submenu to horizontal :-)
https://generatepress.com/forums/topic/trying-to-create-right-aligned-horizontal-submenu/

There are still two adjustments I can't get right:

1. if I change the submenu to hover:
Appearance > Customize > Layout > Primary Navigation > Dropdown > Hover

then the horizontal menu doesn't work anymore. In the css I've tried to replace the class .dropdown-click with .dropdown-hover but unfortunately without success

2. How can I prevent that when hovering the link the background of the submenu is colored gray?

https://wp01.pixelhof.de/
Submenu opens on portfolio

Hi there,

1. that code is specifically for the drop down menu on click.
if you want to switch the customizer over to hover, then i can take a look at what CSS changes may be required.
But.... as a general note, displaying that kind of menu on hover can be rather a clunky UX especially for any users with slight impaired motor skills that still use a mouse or touch device.

2. You can change the color to transparent in Customizer > Colors -> Primary Navigation ---> Sub-Menu Background

Hi David,

>> can be rather a clunky UX ...
Yes, you are so right, i leave it as it is!

>> You can change the color to transparent in ...
yes sure, it can be so simple 🙄

Thanks for the super helpful support from all of you!!!

You're welcome - glad we can be of help :)