0

Hello i have problem with shaking, when i hover on link.nav where i've added border-bottom to show on hover.

<section id="main_header">
<div class="container-fluid mainbar-bg py-1">
    <div class="container">
       
    <nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <!--<span class="navbar-text">
        Navbar text with an inline element
      </span>-->
      <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
        <li class="nav-item mx-4 py-4">
          <a class="nav-link active" aria-current="page" href="#">Strona Główna<br>
              <span class="nav-link-down">Ekran początkowy</span>
            </a>
        </li>
        <li class="nav-item mx-4 py-4">
          <a class="nav-link" href="#">Profil<br>
              <span class="nav-link-down">Zarządzanie</span>
            </a>
        </li>
        <li class="nav-item mx-4 py-4">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>

    </div>
  </div>
</nav>


    </div>
</div>
</section>

CSS style:

.nav-link-down {
    font-size: 0.75rem;
    color: #b1b1b1;
}

.nav-link.active {
    color: #1f1e2e!important;
}

.nav-link {
    color: #1f1e2e!important;
}

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

(I've changed background to dark to show you a container shaking too) https://www.codeply.com/p/XrkrwVnrJD

Problem gif

5
  • Because you are giving border-bottom: 1px on hovering <a> element, so that 1px of height is increased on hovering, that's the shake effect. Dec 12, 2021 at 11:58
  • @ShashankGb How can i fix it?
    – Zimnyb
    Dec 12, 2021 at 12:00
  • Easy hack is to add border-bottom: 1px #212529 solid; to .nav-link then border-bottom: 1px red solid; keep it as it is in .nav-link:hover, now 1px is added previously before hovering so there should be no shaking effect Dec 12, 2021 at 12:04
  • @ShashankGb It works, thank you my brother.
    – Zimnyb
    Dec 12, 2021 at 12:07
  • Posted as answer, If it solved your question, mark as accepted Dec 12, 2021 at 12:12

2 Answers 2

1

First, you add the nav-link to a border and make its color transparent.

enter code here
.nav-link {
color: #1f1e2e!important;
border-bottom: 1px solid transprant;

}

then

enter code here.nav-link:hover {
border-bottom: 1px solid red;

}

0

Easy hack is to add border-bottom: 1px #212529 solid; to .nav-link, now 1px of border-bottom is added previously before hovering and it is hided because of same background-color so there should be no shaking effect.

Here is a demo. (Run it in the full page)

.nav-link-down {
    font-size: 0.75rem;
    color: #b1b1b1;
}

.nav-link.active {
    color: #ffffff!important;
}

.nav-link {
    color: #ffffff!important;
    border-bottom: 1px #212529 solid;
}

.nav-link:hover {
    border-bottom: 1px red solid;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="main_header">
<div class="container-fluid bg-dark py-1">
    <div class="container">
       
    <nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <!--<span class="navbar-text">
        Navbar text with an inline element
      </span>-->
      <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
        <li class="nav-item mx-4 py-4">
          <a class="nav-link active" aria-current="page" href="#">Strona Główna<br>
              <span class="nav-link-down">Ekran początkowy</span>
            </a>
        </li>
        <li class="nav-item mx-4 py-4">
          <a class="nav-link" href="#">Profil<br>
              <span class="nav-link-down">Zarządzanie</span>
            </a>
        </li>
        <li class="nav-item mx-4 py-4">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>

    </div>
  </div>
</nav>


    </div>
</div>
</section>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.