Archived topic
Strikethrough effect on menu
5 replies · Started by Mireia on April 21, 2021
Viewing posts 1–6 of 6
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!
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
This archived topic is closed to new replies.
