Docs

[maria]

Hi,
I would like to add a hover underline to all pages (excluding the navbar and topbar. I’ve tried

a.site.hover_effect:hover{
opacity:0.85;
}
and
a.site:hover {
text-decoration: underline !important;
}

Neither worked.

My site is http://ecbiz206.inmotionhosting.com/~hnporg5

Thanks

[Rahul]

Hey There,

Thanks for writing in!

To add an underline to all of your text links (upon hover) that are not menu related, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site a:hover { 
    text-decoration:underline; 
}

.site .menu-item a:hover { 
    text-decoration: none; 
}

Hope this helps!

Kindly let us know how it goes!

[maria]

Hi,
Thanks, that worked.

How do I changed the color and opacity of the underline? The following didn’t work for me.

.site a:hover {
text-decoration:underline;
-moz-text-decoration-color: rgba(255, 158, 0, 0.6); /* Code for Firefox */
text-decoration-color: rgba(255, 158, 0, 0.6);
}

[Paul R]

Hi,

You can try using border instead.

.site a:hover {
   text-decoration:none;
   border-bottom: 1px solid rgba(255, 158, 0, 0.6);
}

Hope that helps.

[maria]

That works. Thanks

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts