Bootstrap 5 menu shaking on hover-CodePudding

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 >
    <div >
       
    <nav >
  <div >
    <a  href="#">Navbar w/ text</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarText">
      <!--<span >
        Navbar text with an inline element
      </span>-->
      <ul >
        <li >
          <a  aria-current="page" href="#">Strona Główna<br>
              <span >Ekran początkowy</span>
            </a>
        </li>
        <li >
          <a  href="#">Profil<br>
              <span >Zarządzanie</span>
            </a>
        </li>
        <li >
          <a  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

CodePudding user response：

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;

}

CodePudding user response：

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 >
    <div >
       
    <nav >
  <div >
    <a  href="#">Navbar w/ text</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarText">
      <!--<span >
        Navbar text with an inline element
      </span>-->
      <ul >
        <li >
          <a  aria-current="page" href="#">Strona Główna<br>
              <span >Ekran początkowy</span>
            </a>
        </li>
        <li >
          <a  href="#">Profil<br>
              <span >Zarządzanie</span>
            </a>
        </li>
        <li >
          <a  href="#">Pricing</a>
        </li>
      </ul>

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


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