- This topic has 5 replies, 2 voices, and was last updated 4 years, 5 months ago by
.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Posts
-
Hi GP team!
We’d like to have this effect on hover (and current page) on menu: https://codepen.io/tsimenis/pen/BKdENX
We’ve tried to apply it on the website but we cannot find the correct css classes.
Could you provide some help?
Thank you very much!
Customer Support
Hi there,
try this CSS:
.main-navigation .main-nav ul li a:before, .main-navigation .main-nav ul li a:after { content: ''; position: absolute; width: 0%; height: 1px; top: 50%; margin-top: -0.5px; pointer-events: none; background: #000; } .main-navigation .main-nav ul li a:before { left: 30px; } .main-navigation .main-nav ul li a:after { right: 30px; background: #000; transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } .main-navigation .main-nav ul li:hover a:before, .main-navigation .main-nav ul li.current-menu-item a:before { background: #000; width: calc(100% - 60px); transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .main-navigation .main-nav ul li:hover a:after, .main-navigation .main-nav ul li.current-menu-item a:after { background: transparent; width: calc(100% - 60px); transition: 0s; }Hi David,
Works perfectly 🙂
One more thing: how can we apply a strikethrough on the current page on menu?
Thank you very much for your help!
I updated the CSS above to include the current menu item
Perfect! Thanks a lot!
You’re welcome
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
