CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
James
James

Reputation: 87

How to underline links in the navbar using Bootstrap 3?

I'm trying to apply custom CSS styling to the Bootstrap navbar, so that the link text is underlined on mouseover. I'd also like the underline to fade in.

Here is what I have so far: https://jsfiddle.net/xfddh0r5/

.navbar-default {
    background-color: #fff;
}
.navbar-default .navbar-nav > li {
    background-color: #fff;
}
.navbar-default .navbar-nav > li > a {
    color: #333;
    border-bottom: 1px solid transparent;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #fff;
    color: #439348;
    border-bottom: 1px solid #439348;
}

I've noticed two strange problems:

Could anyone tell me why this is happening?

Many thanks!

Upvotes: 4

Views: 21813

Answers (2)

Sean Fujiwara
Sean Fujiwara

Reputation: 4546

The links have a lot of padding to make them easy to click on. If you want to apply a border to the text, you can put the text inside a span, and apply the style to that.

HTML:

<ul class="nav navbar-nav navbar-right">
  <li class="active"><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>Item 1</span></a></li>
  <li><a href="#"><span>Item 2</span></a></li>
</ul>

CSS:

.navbar-default .navbar-nav > li > a > span {
  border-bottom: 1px solid transparent;
}

You can accomplish the fade using CSS transitions:

.navbar-default .navbar-nav > li > a:hover > span {
  border-bottom-color: #439348;
  transition: border 1s linear;
}

Upvotes: 2

Stickers
Stickers

Reputation: 78696

You can reset the padding to 0 or decrease the values. And use margin to adjust the spacing again.

.navbar-default .navbar-nav > li > a {
  color: #333;
  border-bottom: 1px solid transparent;
  padding: 0; /*removing spacing*/
  margin: 14px; /*add spacing*/
}

Upvotes: 4

Related Questions