Off Canvas Menu - Horizontal Dropdown

Hi there,

does it have to be on hover ? As that may get a little trickier. Let me know

Hi David,

thanks for your feedback. Not necessary to be on hover, although my buddy would like
to have it on hover, I do find it "too much". That been said, it would be fine to be "on click" :)

Thanks in advance for your time and effort

Hi John,

Try this CSS:

.slideout-navigation ul.slideout-menu {
    flex-wrap: nowrap;
}

.slideout-navigation.do-overlay .inside-navigation {
    padding: 10% 0 0 0;
    max-width: 100%;
}

If it doesn't work, can you provide your site link?

And what's the plan for sub-menus?

Let us know!

Hi there Ying,

thanks for chiming in and the provided css, which places them menu items
horizontal but they don't show up like in the provided screenshot.
I need the menu items to show up like in the screenshot, right after
the header as a horizontal navbar in a white background instead of the
background overlay.
There are no submenus, just the 5 menu items like in the screenshot.
In case that you'll need admin access, please let me know

Your time and effort is greatly appreciated

Hi John,

To clarify, do you want an Off-Canvas menu or a dropdown menu? Your sample menu in your screenshot looks like a dropdown menu.

Let us know what you prefer.

Hi Fernando,

sorry, my bad... I want an off-canvas menu, like in the link provided, but
on mouse-click it should appear like in the screenshot, horizontaly right after
the header like a navbar. Hope this makes sense

My english is not that good, so please excuse my bad description

Thanks once again for your time and effort
John

No worries. I'll try to take a screen recording for more clarity.

Dropdown: https://share.getcloudapp.com/v1uE65Xg

Off-canvas: https://share.getcloudapp.com/nOu1g6Go

Can you watch these two first and let me know which you prefer?

Hi there Fernando,

thank you very much for your time and effort. It's the Dropdown menu :)
Can you please help me out to achieve a result like in your screen recording?

You guys are AWESOME, keep on keeping the great work up, it's greatly appreciated

If it's the dropdown menu, can you disable the off-canvas menu first?

Hi there Ying,

sure, I disabled the off-canvas and removed the Logo from the slideout-navigation. Next?
Please consider that the gp-icon (burger) should stay in place, like in Fernandos screen-recording.

The menu toggle disappeared on the desktop, some code is causing this.
Can you disable your cache plugin so I can see the CSS more clearly?

Done :)

it dissapeard because I disabled the off-canvas menu.
The header ist created according to Example1 here https://docs.generatepress.com/article/header-examples/

Do you have a menu assigned to the primary navigation?

You can check it at appearance > menus.

If not, please assign one.

Let me know!