Highlighting the Active Menu Option

Hi @prak1

Can you share a link to your site so we can take a look and provide CSS that will suit you site?

Evan

Hi @eherman24,

Here is the link (xxxx)

Thanks in advance.

–
Prak

• This reply was modified 4 years, 5 months ago by prak1.

Hi Prak,

Give the following a shot:

.primary-menu li.current-menu-item a:after {
   opacity: 1;
}

That will show the underline for the current menu item.

If you want to remove the space between the underline and the word, you need to tweak the underline itself and shift it up.

Adding to the code above, you could do the following (Adjusting the value in bottom: 6px; as needed, to increase/decrease the distance) to remove the space between the words and the underline (This will tweak the underline when hovering over menu items, as well):

.primary-menu li.current-menu-item a:after,
.primary-menu a:hover:after {
   bottom: 6px;
   opacity: 1;
   position: absolute;
}

You can add the above CSS code to your themes ‘Additional CSS’ section inside of the customizer. From the dashboard you get navigate there by going to ‘Appearance > Customize > Additional CSS‘.

Let us know if that helps!

Evan

Hi Evan,

I used the second one. The bottom spacing part, left it as it was. It looks better now.

Thank you for your help. I appreciate it.

Best,
Prak

@prak1

No problem at all – glad I could help out. Have a great rest of your day!

Evan