🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] submenu horizontally instead of vertically

Home Forums Support submenu horizontally instead of vertically

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1147739
    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,

    #1147977
    David
    Staff
    Customer Support

    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

    #1148264
    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;}
    #1148362
    David
    Staff
    Customer Support

    Glad to hear that 🙂

    #1150098
    letsdoit

    Hello David,

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

    Thanks

    #1150592
    David
    Staff
    Customer Support

    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%;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.