Archived topic
Sticky Header with Menu Hover Animation
3 replies · Started by David on November 12, 2020
Hi All,
I've setup a test site for the forthcoming WP 5.6
I imported the Wired starter site, and the only two changes I have made is to make the menu sticky and add the 'Menu Hover Animation' from the docs here.
All good, the only thing (which is something I have meant to ask previously) is how to adjust the setting for the hover differently for normal and sticky.
As you can see the sticky for the hover effect to be about right, but for normal it sits too high off the text.
I tried to play around with the CSS, but can't nail it!
I'm assuming the CSS for hover effect needs a second lot to accommodate this?
TIA, Dave
Hi there.
Give this a shot:
@media (min-width: 769px) {
.main-navigation:not(.navigation-stick) .menu>.menu-item>a:after {
bottom: 28px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Perfect, thanks Leo :)
No problem :)
