- This topic has 11 replies, 4 voices, and was last updated 5 years, 9 months ago by Leo.
-
AuthorPosts
-
May 22, 2018 at 8:50 am #581833Tanner
Hi,
I’d like to add an underline animation effect to my navigation bar. I used this code:
@media (min-width: 769px) { .main-navigation .menu > .menu-item > a::after { content: ""; position: absolute; right: 0; left: 50%; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; background-color: currentColor; transition: 0.3s width ease; } .main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after { width: 50%; } }
Couple of things I’m looking to do:
1) Disable the underline for the current page
2) Create a little padding between the text and the underline effect so it isn’t right underneath the text
3) Change the underline color to #23efef
4) Have the effect animate to the width of the page wordAny suggestions are much appreciated. Thank you!
~ Tanner G.
May 22, 2018 at 9:03 am #581848DavidStaffCustomer SupportHi Tanner
you can try this – adjusting the line to fit the exact word width is tricky with this method, but as you can see i have adjusted the last property width, which you can adjust to find a sweet spot
@media (min-width: 769px) { .main-navigation .menu > .menu-item > a::after { content: ""; position: absolute; right: 0; left: 50%; bottom: 8px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; background-color: #23efef; transition: 0.3s width ease; } .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after { width: 70%; } }
May 23, 2018 at 8:05 am #582714TannerI see what you did. Thanks!
May 23, 2018 at 8:11 am #582721DavidStaffCustomer SupportThat’s great, glad i could help!
June 23, 2018 at 8:01 am #606854JohnHi, I like this very much. I’m looking for a simular option for the sub-menu aswell.
Do you have a solution for this?
Kind regards
JohnJune 23, 2018 at 11:16 am #606959LeoStaffCustomer SupportThis post should help:
https://generatepress.com/forums/topic/adding-sub-menu-hover-underline-animation/June 23, 2018 at 1:42 pm #607027JohnLeo,
Many thanks for your answer. It works. One minor thing: In the menu the current item is underlined, but in the sub-menu it isn’t. Is there a way to have the current choise underlined in the sub-menu aswell?Kind regards
JohnJune 23, 2018 at 4:49 pm #607088LeoStaffCustomer SupportCan you paste your full CSS code here?
June 24, 2018 at 12:56 am #607175JohnHi Leo,
Here’s the css
Tanks in advance
John
@media (min-width: 769px) {
.main-navigation .menu .menu-item > a::after {
content: “”;
position: absolute;
right: 0;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);display: block;
width: 0;
height: 3px;background-color: currentColor;
color: #ffcc00;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu .menu-item a:hover::after {
width: 80%;
}
}June 24, 2018 at 9:22 am #607473LeoStaffCustomer SupportTry replacing”
.main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu .menu-item a:hover::after { width: 80%; }
with
.main-navigation .menu .menu-item.current-menu-item > a::after, .main-navigation .menu .menu-item.current-menu-ancestor > a::after, .main-navigation .menu .menu-item a:hover::after { width: 80%; }
untested ๐
June 24, 2018 at 12:29 pm #607587JohnHi Leo,
That solved the problem.
Many thanks
Kind regards
JohnJune 24, 2018 at 7:57 pm #607717LeoStaffCustomer SupportNo problem ๐
-
AuthorPosts
- You must be logged in to reply to this topic.