CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Marcos Martinez
Marcos Martinez

Reputation: 35

How do I remove nav underline on hover from Bootstrap theme?

I went into the css and removed all of the text-decoration:underline but for some reason it's still showing up. Can somebody please tell me how to remove the top navigation underline when you hover over the nav?

Here is a link to the Oleose theme.

http://www.scoopthemes.com/templates/Oleose/Freeze/

Upvotes: 1

Views: 2943

Answers (2)

TeeDeJee
TeeDeJee

Reputation: 3741

Here is the culprit. It's a pseudo-element (:after) that makes the underline under the link.

header .navbar-default ul.navbar-nav li a:hover:after {
  background: #ffffff;
}

Just remove this or set background to transparent. Or even better remove this one too.

header .navbar-default ul.navbar-nav li a:after{
    ....
}

Here is the style made for the underline.

Upvotes: 2

connexo
connexo

Reputation: 56753

So you understand what's going on there: The "underline" you are referring to is created as a pseudo element :after on the link itself. It is even there if you do not mouseover the link, it's just that in that state it has a transparent background-color so you cannot see it. On :hover the background-color of this pseudo element is changed to #ffffff and thus the element becomes visible. This is done in a transition fashion so it doesn't change abruptly, but softly.

This is the rule that makes the "underline" visible:

header .navbar-default ul.navbar-nav li a:hover:after {
    background: #ffffff;
}

If you change it to

header .navbar-default ul.navbar-nav li a:hover:after {
    background-color: transparent;
}

it will stay invisible also when :hover happens. And you can always go there later and reactivate it if necessary!

Upvotes: 0

Related Questions