Archived topic

submenu horizontally instead of vertically

5 replies · Started by letsdoit on January 28, 2020

Viewing posts 1–6 of 6

January 28, 2020 at 9:19 pm #1147739

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,

January 29, 2020 at 3:24 am #1147977

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

January 29, 2020 at 6:58 am #1148264

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;}

January 29, 2020 at 8:28 am #1148362

Glad to hear that :)

January 31, 2020 at 2:21 am #1150098

Hello David,

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

Thanks

January 31, 2020 at 9:08 am #1150592

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%;
    }
}

This archived topic is closed to new replies.

Start building better websites today.