- This topic has 5 replies, 2 voices, and was last updated 6 years, 3 months ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
-
AuthorPosts
-
December 19, 2017 at 12:38 pm #453266Roland
Hi there,
I added the nav links effect to the main menu using this code:
/* Menüpunkte unterstreichen - nav links effect - von generatepress.com */ @media (min-width: 769px) { .main-navigation .menu > .menu-item > a::after { content: ""; color: #FF9034; position: absolute; right: 0; left: 50%; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 1px; background-color: currentColor; transition: 0.5s width ease; } } .main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item > a:hover::after { width: 50%; }
Any idea how I can apply this effect to the secondary navigation too?
Roland
December 19, 2017 at 1:25 pm #453301LeoStaffCustomer SupportHi there,
Try replacing all the
.main-navigation
with.secondary-navigation
Let me know.
December 19, 2017 at 2:18 pm #453337RolandHi Leo,
that’s exactly what I tried before:
/* Menüpunkte des zweiten Menüs unterstreichen - nav links effect - von generatepress.com */ .secondary-navigation .menu > .menu-item > a::after { content: ""; color: #FF9034; position: absolute; right: 0; left: 50%; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 1px; background-color: currentColor; transition: 0.5s width ease; } .secondary-navigation .menu > .menu-item.current-menu-item > a::after, .secondary-navigation .menu > .menu-item > a:hover::after { width: 50%; }
But it doesn’t work …
Perhaps a misspelling I don’t see?
Roland
December 19, 2017 at 4:27 pm #453412LeoStaffCustomer SupportAhh give this a shot:
@media (min-width: 769px) { .secondary-navigation .secondary-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; } .secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after, .secondary-navigation .secondary-menu > .menu-item > a:hover::after { width: 50%; } }
December 20, 2017 at 8:30 am #453891RolandHi Leo,
that’s it. Works fine.
Thanks a lot
RolandDecember 20, 2017 at 2:24 pm #454135LeoStaffCustomer SupportNo problem!
-
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.