[Resolved] Menu Animation Feature

[Ashley]

I’d really like to replicate the dropdown style on this site here:
https://www.herbertwoods.co.uk/

As far as I can see there are 3 separate elements:

> Center Aligned Dropdown menus (underneath it’s parent anchor link)
> Small triangle added to the top of the menu
> subtle ‘Ease-up’ animation on hover

Can you help with recreating any of this in GP?

[David]

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

[Ashley]

David, you’re a legend – thank you!

I’ve bookmarked this for future use 🙂

[David]

Well i am glad to be of help 🙂

[Ashley]

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?

[David]

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

[Ashley]

That’s cracked it! – Thanks again David 🙂

[David]

You’re welcome

[Author]

Posts