Menu Animation Feature

Hi there,

i have this CSS which is something similar:

#site-navigation ul.menu>li>ul:before {
    content: "";
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #22181c transparent;
    height: 0;
    position: absolute;
    left: 50%;
    top: -7.5px;
    width: 0;
    -webkit-transform: rotate(360deg) translateX(-50%);
}

#site-navigation ul ul {
    transform: translatey(6px); 
    transition: 0.15s ease-in;
}

#site-navigation ul li:hover ul {
    transform: translateY(0px); 
        transition: 0.15s ease-in;
}

#site-navigation:not(.toggled) ul ul {
	transition: opacity 0.35s linear;
}

David, you're a legend - thank you!

I've bookmarked this for future use :)

Well i am glad to be of help :)

Hi There,

Sorry to be a pain, I've spotted a potential issue I was wondering if you could help with?

The menu items veer off the edge of the browser window (see here - http://tinypic.com/r/2mzmmnb/9) - is there a way to prevent this from happening?

Hmmm - so the submenus are absolutely positioned so it won't detect the browser edge. One workaround would be this CSS:

@media (max-width: 1300px) and (min-width: 768px) {
    #sticky-navigation li.push-left .sub-menu {
        left: auto !important;
        right: 0;
    }
}

And then add the push-left custom class to the Therapies menu item.

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

You may want to tweak the max-width and min-widths to suit

That's cracked it! - Thanks again David :)

You're welcome