Archived topic

How to Add Border Hover on Primary Navigation?

5 replies · Started by Jericho on August 4, 2018

Viewing posts 1–6 of 6

August 4, 2018 at 2:04 am #640105

Hi Tom & Team,

By default, the settings under Colors -> Primary Navigation only allows you to add Text and Background Hover.

I want to add Border Hover like on Google search (http://prntscr.com/kekah7).

Please help me with some CSS codes. :)

Thanks!
Jericho

August 4, 2018 at 8:19 am #640307

Hi there,

Perhaps something like this would help?
https://docs.generatepress.com/article/adding-menu-hover-animation/

August 4, 2018 at 9:32 am #640364

Hi Leo,

It looks good but I'm using a white background navigation so the hover background is of no use. Also, I am referring to the border in hover/current like in Google search, not the text border.

Can you help me with this?

Goal: http://prntscr.com/kenstb

Thanks very much!

August 4, 2018 at 12:04 pm #640461

Try this CSS:

.main-navigation .main-nav ul li a {
    border-bottom: 2px solid transparent;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-bottom: 2px solid transparent;
}

August 4, 2018 at 7:15 pm #640640

Thanks, Leo!

August 5, 2018 at 9:00 am #640987

No problem :)

This archived topic is closed to new replies.

Start building better websites today.