[Support request] Separate Horizontal Sub-Menu

[David Westerlund]

I simply just wants the sub-menu, on those pages that has a sub-menu, to be horizontally on a row below the header. I’m currently using the sticky menu as a header. Ideally the sub-menu would also be sticky fixed to the sticky header menu. But it would be fine even if it was just a sub-menu that is not sticky.

Feels like this would be something really basic to fix but still can’t understand how it’s meant to accomplish with GeneratePress. I tried to fix this with CSS but the problem is that the sub-menu is nested to the parent main menu item and will therefore use that width. And if I break it out from that with absolute positioning then I have to set the height manually. Which could be the way to go. I just don’t like the absolute positioning of things since it’s usually not very mobile responsive.

What’s the way to go here?

[David]

HI there,

so the sub menu will be open at all times?

you could just apply a flex to the sub menu – using your current CSS:

ul.sf-menu > li.current-menu-item > ul.sub-menu  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Would need to adjust the ULs left value to position it. But let us know if thats what you require.

[David Westerlund]

No, the sub menu should only be open when we’re on a page that is included in the submenu or when we are on the parent page. Very simple. If a page has a sub menu, that should be shown when we visit that page.

Sorry the code you gave doesn’t really give that result I want. The sub menu seems to stretch out the width of the parent too. So the parent menu item would be super wide if it has a lot of pages in it’s sub menu.

What I mostly would like is to get the sub menu out from it parent’s li element. And place it wherever I want. A “sub menu widget” that is shown only if the current page has any child pages to fill the sub menu with.

Really feel like this is a basic thing that many people already should been asking for and it should already be a solution for in WordPress. Am I the only one that ever wanted this for a WordPress site? Can’t be?

[David]

Maybe this article from Bill Erickson is what you’re after.
It simply replaces the Secondary Navigation menu items with any sub menus of the current page. If there are none then it doesn’t display the nav.

https://www.billerickson.net/building-dynamic-secondary-menu/

[Author]

Posts