Добавьте рамку внизу к Bootstrap навигационной ссылке

Question

У меня есть bootstrap 4 навигационная панель, к которой я хотел бы добавить эффект наведения на каждую ссылку. Я добавил следующее css, чтобы переписать стандартные стили, которые дают «своего рода» то, что я ищу. При наведении курсора на ссылку отображается нижняя граница, но при перемещении текст также перемещается вверх. Он также находится не внизу самой панели навигации.

Поскольку я использую img для установки высоты строки, в которой находится панель навигации, а затем делю ее на 50%, интересно, так ли это Я против?

Как вы можете видеть на картинке, я бы хотел, чтобы оранжевая рамка находилась внизу панели навигации. В качестве непреднамеренного следствия того, что я сделал до сих пор, при наведении курсора на любую ссылку, весь текст увеличивается на 5px или около того, а затем падает, если не зависать.

Это код, создающий панель навигации ...

<div class="container-fluid p-0">
<div class="row no-gutters shadow">
<div class="col-sm-12 col-md-12 col-lg-1">
  <img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
</div>
<div class="col-sm-12 col-md-12 col-lg-11">
  <div class="row no-gutters h-50">
    <div class="d-none d-lg-block col-12">
      <nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100">
          <ul class="navbar-nav mr-auto">
            <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="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
      </nav>
    </div>
  </div>
</div>

А это CSS ...

/* Header Logo */
.header-logo {
  width:100%;
  max-width: 160px;
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
 .header-logo {
   width:100%;
   max-width: 80px;
   margin:10px;
 }
}

/* Large viewport navbar */
.nav-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8vw;
  font-weight: bolder;
  text-transform: uppercase;
}
.nav-link:hover {
  border-bottom: 5px solid #ff7240;
  color:#fff!important;
}

Может кто-нибудь указать меня в правильном направлении?

С уважением

Мэтт

Answer 1

Чтобы предотвратить рост панели навигации при наведении курсора на ссылку, укажите прозрачную рамку-дно того же размера, что и: hover border.

.nav-link {
  border-bottom: 5px solid transparent;
}

.nav-link:hover {
  border-bottom: 5px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar" style="border: 1px solid gray">
  <ul class="navbar-nav">
    <li>
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
  </ul>
</nav>

Answer 2

После небольшого копания я обнаружил, что мне нужно добавить h-100 к ул. Это затем заставило ссылку заполнить его родительский элемент, а затем в css use height: 100% для .nav-link

Завершенный код:

<div class="container-fluid p-0">
  <div class="row no-gutters shadow">
    <div class="col-sm-12 col-md-12 col-lg-1">
      <img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-11">
      <div class="row no-gutters h-50">
        <div class="d-none d-lg-block col-12">
          <nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100 py-0">
              <ul class="navbar-nav h-100 mr-auto">
                <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="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
              </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

И CSS - Мне пришлось добавить верхний отступ к ссылке, чтобы переместить его обратно в середину.

/* Header Logo */
.header-logo {
  width:100%;
  max-width: 160px;
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
  .header-logo {
    width:100%;
    max-width: 80px;
    margin:10px;
  }
}

/* Large viewport navbar */
.nav-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8vw;
  font-weight: bolder;
  text-transform: uppercase;
  border-bottom: 5px solid transparent;
  height:100%
  padding-top:27px;
}

.nav-link:hover {
  border-bottom: 5px solid #ff7240;
  color:#fff!important;
}