[Resolved] Horizonal Sub-Menu Issues

[Adam]

Hey Tom and Team,

I’m trying to create a horizontal submenu for my main nav menu. I found and have applied the following code:

body .sf-menu > li {
	position: static;
}

body .main-navigation ul.menu > li > ul {
	width: 100%;
        left: 0 !important;
}

body .main-navigation ul.menu > li > ul > li {
	width: auto;
}

body .main-navigation ul.menu > li > ul > li ul {
	left: 0;
	top: 100%;
}

Which I found here: submenu dropdown change from vertical to horizontal

But I have 2 problems:

1. The sub-menu on the sticky menu gets thrown all the way to the left of the screen (sticky menu items are aligned right) and are placed below the sticky menu (so they have no background and are below the box shadow I’ve applied). I would love for these to show up underneith their parent (‘ABOUT’) the same way they currently do on the main nav menu, and (if possible) would love for them to ease in and for the sticky menu to expand down a bit when they do so that it all fits nicely, similar to what you’ve helped me achieve when toggling my mobile menu.

2. I had applied some nav menu animation as you instructed here: Adding Menu Hover Animation (code below).
Problem is that now that I have a horizontal menu it’s all out of whack, and only works properly for the one menu item I have that has a sub-menu. Is there a way to have menu hover animation work with a horizontal sub-menu? And if so, can I have the hover animation work for sub-menu items as well (preferably while leaving their parent underlined to show which menu item the sub-menu belongs to)?

Thanks!
Adam

Adding Menu Hover Animation (for reference)

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

[Tom]

Hi there,

Try this CSS for your horizontal sub-menu instead:

.dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul, 
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul {
    max-height: 1000px;
    overflow: hidden;
    width: auto;
    background: #fff;
    transition-delay: 200ms;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:hover, 
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover {
    position: static;
}

.main-navigation ul ul li {
    display: inline-block;
    width: auto;
}

.main-navigation .main-nav ul li a {
    position: relative;
}

Let me know 🙂

[Adam]

Hey Tom – that fixed the problem – and it’s looking really fly now (I don’t get why horizontal sub-menus aren’t more popular). Thanks! 🙂

And for anyone else out there looking to do something similar, if you want to adjust the animation effect and apply it to sub-menu items (i.e. if you have a horizontal sub-menu), I expanded the code in the following way:

 .main-navigation .menu > .menu-item > a::after, .main-navigation .menu .sub-menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 2px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 1.5px; /* Adjusts thickness of bar */
	color: #336a86;  /* pick color hear if you want it to be different from default hover-over font color */
        background-color: currentColor;
        transition: 0.3s width ease; /*Adjusts animation speed */
}

.main-navigation .menu > .menu-item-699 > a::after {
        left: 40%; /* Adjusts bar to be under menu item word when there is an arrow displacing the word - note you need to change the .menu-item-# to the correct number for that menu item */
}

.main-navigation .menu .sub-menu > .menu-item > a::after {
	bottom: 6px; /* Adjusts how far below the menu item the bar appears */
}

.main-navigation.navigation-stick .menu > .menu-item > a::after {
	bottom: 10px; /* Adjusts how far below the sticky menu item the bar appears */
}
    
.main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after {
        width: 33%; /* Adjusts width of bar for main menu items */
}
    
.main-navigation .menu .sub-menu > .menu-item.current-menu-item > a::after, .main-navigation .menu .sub-menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu .sub-menu > .menu-item > a:hover::after {
        width: 23%; /* Adjusts width of bar for sub-menu items */
}

Hope that’s helpful someday to someone!

[Tom]

Awesome! Thank you for sharing your code 🙂

[Pete]

My sub menu Customiser colours aren’t being applied to the new horizontal menu?

[Pete]

The hover colour is per the Customiser, but the normal sub menu colour is white (which is not what my Customiser has).

[Elvin]

Hi Pete,

Can you open a new topic for this? So you can use the private information text field to share the details of your site. (links, site credentials, etc)

Thank you. 🙂

[Thomas]

Hi there,

that horizontal sub menu approach is great and still working. Is it possible to keep the horizontal sub-menus of current-menu parents open (without hover)? Just like: https://kunstmuseum-ahrenshoop.de/museum/sammlung/
Unfortunately I haven’t managed to do that yet, although I’ve tried a lot of CSS adjustments…

Kind regards,
Thomas

[Fernando]

Hi Thomas,

In your sample site, the submenu item of the first primary menu item is shown when no other item is hovered.

To do as such, here’s a CSS you may try adding through Appearance > Customize > Additional CSS:

.dropdown-hover .main-navigation:not(.toggled) ul li:first-of-type>ul {
    max-height: 1000px;
    overflow: hidden;
    width: auto;
    background: #ff00bb;
    left: auto;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    z-index: 9998;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:first-of-type {
    position: static;
}

Kindly modify #ff00bb to your preferred color value.

This would force the sub-menu of the first menu item to always appear.

Hope this helps!

[Author]

Posts