CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
The Dead Man
The Dead Man

Reputation: 5566

Width of border bottom

I have a navigation menu using bootstrap now I want to add border-bottom to the active link, unfortunately, the width of border-bottom is greater than the width of the text itself.

Here is codepen live demo

.navbar-light .navbar-nav .nav-link {
  padding: 20px;
}

.navbar-light .navbar-nav .active .nav-link {
  border-bottom: 2px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

expected result:

enter image description here

what do I need to to get what I want?

Upvotes: 0

Views: 168

Answers (1)

DrOverbuild
DrOverbuild

Reputation: 1265

As @tacoshy mentioned, using margin instead of padding will put the spacing outside of the border.

You can also add padding to the .nav-item element that surrounds the .nav-link.

What it looks like you're trying to do is put 20px of spacing on all sides. If you move that 20px to the left and right padding of the surrounding .nav-item element, and set the left and right padding of .nav-link to 0, then the border will only be the length of the text. You can then add some of the vertical spacing to inside the .nav-link element and the remaining spacing to the top and bottom padding of the .nav-item element.

.navbar-light .navbar-nav .nav-item {
  /* add 10px to top and bottom padding, add 20px to left and right padding */
  padding: 10px 20px; 
}

/* added .nav-item to selector in order to properly override bootstrap padding */
.navbar-light .navbar-nav .nav-item .nav-link {
  /* add 10px top and bottom padding, 0 left and right padding */
  padding: 10px 0;
}

.navbar-light .navbar-nav .active .nav-link {
  border-bottom: 2px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions