[Resolved] Off Canvas Menu – Horizontal Dropdown

[John]

Hi there GP Team,

would it be possible to help me out in order to customize the off canvas menu in a way
to appear (on mouse hover) horizontaly like pictured in the pic?

thanks in advance for your time and effort
John

[David]

Hi there,

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

[John]

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

[Ying]

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!

[John]

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

[Fernando]

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.

[John]

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

[Fernando]

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?

[John]

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

[Ying]

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

[John]

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.

[Ying]

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?

[John]

Done 🙂

[John]

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

[Ying]

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!

[Author]

Posts