[Resolved] submenu horizontally instead of vertically

[letsdoit]

Hello Team,

I am wondering if their is some way that submenu is aligned horizontally instead of vertically upon hovering/clicking.

Also, once user clicks on Photographer Menu, is it possible that the respective submenus remain fixed and not fly out.

https://prnt.sc/quc8kc – what I am trying to achieve.

Regards,

[David]

Hi there,

Tom provides some CSS to do that here:

https://generatepress.com/forums/topic/submenu-fixed/#post-1048248

In Customizer > Layout > Primary Navigation –> Navigation Dropdown, select one of the Click options to keep it open

[letsdoit]

Thanks David, it worked like charm.

I digged into forum replies and also figured out below – (if in case others also search for same so at one place),

Added below css which extended the width of submenu to full width and also centered it.

.inside-navigation {position: static;}

.main-navigation ul ul.sub-menu {text-align: center;}

ul.sub-menu li {float: none; display: inline-block;}

[David]

Glad to hear that 🙂

[letsdoit]

Hello David,

Somehow the menu is not fixed even though using same css which was used before.

Thanks

[David]

That CSS applied to the Navigation as Header option, with you current setup try this instead:

@media (min-width: 769px) {
    .main-navigation li.menu-item-has-children, .inside-navigation {
        position: static !important;
    }
    .inside-header {
        position: relative;
    }
    .main-navigation:not(.toggled) ul li:hover>ul {
        display: flex;
        left: 0 !important;
        justify-content: flex-end;
        width: 100%;
    }
}

[Author]

Posts