how to solve navigation bar moving on hover

Question

am trying to fix this navigation, but when I hover the navigation item all others are moving but I am not sure where the problem is with the hover effect. how to solve the problem ? and for notification not able to display badge properly and the menu items are aligned properly i dont know what am i missing in it!

.active {
  border-bottom: 2px solid #fb9c18;
}

.nav-link:hover {
  border-bottom: 2px solid #fb9c1861;
}

.bg {
  background: white;
}

.nav-item {
  margin: 0 4.3rem;
  letter-spacing: 1.2px;
}

.navtoggle {
  color: #fb9c18 !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-item {
    margin: 0 3rem;
    letter-spacing: 1.2px;
  }
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 24em;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.pulse {
  position: absolute;
  top: -3px;
  right: -1em;
  // top: 5px;
  // right: 44.7rem;
  height: 30px;
  width: 30px;
  z-index: 10;
  border: 4px solid #fb9f18;
  border-radius: 100%;
  -webkit-animation: pulse 1s ease-out infinite;
  animation: pulse 2s ease-out infinite;
  opacity: 1;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 #fb9f18;
}

.marker {
  position: absolute;
  top: 2px;
  right: -0.7em;
  // top: 10px;
  //   right: 45em;
  height: 20px;
  width: 20px;
  border-radius: 60px;
  background: #fb9f18;
}

.np {
  font-size: 0.77em;
  font-weight: 700;
  position: absolute;
  right: 5px;
}


@keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }

  25% {
    -webkit-transform: scale(0.1);
    opacity: 0.1;
  }

  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }

  75% {
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}


::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}


.head {
  padding: 5px 15px;
  border-radius: 3px 3px 0px 0px;
}

.footer {
  padding: 5px 15px;
  border-radius: 0px 0px 3px 3px;
}

.notification-box {
  padding: 10px 0px;
}

.bg-gray {
  background-color: #eee;
}

.texhite {
  color: black;
}

.texorange {
  color: #fb9f18;
}

.notificationTime {
  font-size: 11px;
}

.linkUser {
  color: #403e3e;
  letter-spacing: .5px;
  cursor: pointer;
}

.linkUser:hover {
  color: #fb9f18;
  text-decoration: none;
}

.h7 {
  font-size: 0.8rem;
}

.d-flex, .d-inline-flex, .media, .media > :not(.media-body), .jumbotron, .card {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}


.notificationHeight {
  max-height: 36em;
  overflow-y: auto;
}


.drop a {
  display: block;
}

.open {
  display: none;
}



.dropdown-toggle::after {
    display:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--Navbar -->
<nav class="mb-1 navbar navbar-light fixed-top bg lighten-4 ">
  <div class="container">

      <ul class="navbar-nav ">

        <li class="nav-item">
          <a class="nav-link selected">
            Notifications
             <div class="pulse"></div>
            <div class="marker"><span class="np">0</span></div>
             <div style="cursor:pointer" ><span class="np" ></span></div> 
        </a>
        </li> 
        
       
        <li class="nav-item">
          <a class="nav-link selected">
            Profile</a>
        </li>

        <li class="nav-item">
          <a class="nav-link selected">
            Logout</a>
        </li>
      </ul>
    </div>

</nav>
<!--/.Navbar -->

Answer 1

That's because you are adding border-bottom when :hover. To not have that effect, set a border-bottom on it with the same dimension even without hover.

Add

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

or use the background color, since transparent color support is unknown for some less common browsers.

You can also just change the border-bottom-color on hover. This way you don't have to worry about matching the border thickness for both properties.

.active {
  border-bottom: 2px solid #fb9c18;
}

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

.nav-link:hover {
  border-bottom: 2px solid #fb9c1861;
}

.nav-link:active {
  border-bottom: 2px solid #fb9c18;
}

.bg {
  background: white;
}

.nav-item {
  margin: 0 4.3rem;
  letter-spacing: 1.2px;
}

.navtoggle {
  color: #fb9c18 !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-item {
    margin: 0 3rem;
    letter-spacing: 1.2px;
  }
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 24em;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.pulse {
  position: absolute;
  top: -3px;
  right: -1em;
  // top: 5px;
  // right: 44.7rem;
  height: 30px;
  width: 30px;
  z-index: 10;
  border: 4px solid #fb9f18;
  border-radius: 100%;
  -webkit-animation: pulse 1s ease-out infinite;
  animation: pulse 2s ease-out infinite;
  opacity: 1;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 #fb9f18;
}

.marker {
  position: absolute;
  top: 2px;
  right: -0.7em;
  // top: 10px;
  //   right: 45em;
  height: 20px;
  width: 20px;
  border-radius: 60px;
  background: #fb9f18;
}

.np {
  font-size: 0.77em;
  font-weight: 700;
  position: absolute;
  right: 5px;
}


@keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }

  25% {
    -webkit-transform: scale(0.1);
    opacity: 0.1;
  }

  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }

  75% {
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}


::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}


.head {
  padding: 5px 15px;
  border-radius: 3px 3px 0px 0px;
}

.footer {
  padding: 5px 15px;
  border-radius: 0px 0px 3px 3px;
}

.notification-box {
  padding: 10px 0px;
}

.bg-gray {
  background-color: #eee;
}

.texhite {
  color: black;
}

.texorange {
  color: #fb9f18;
}

.notificationTime {
  font-size: 11px;
}

.linkUser {
  color: #403e3e;
  letter-spacing: .5px;
  cursor: pointer;
}

.linkUser:hover {
  color: #fb9f18;
  text-decoration: none;
}

.h7 {
  font-size: 0.8rem;
}

.d-flex, .d-inline-flex, .media, .media > :not(.media-body), .jumbotron, .card {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}


.notificationHeight {
  max-height: 36em;
  overflow-y: auto;
}


.drop a {
  display: block;
}

.open {
  display: none;
}



.dropdown-toggle::after {
    display:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-light fixed-top bg lighten-4 ">
  <div class="container">

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link selected">
            Notifications
             <div class="pulse"></div>
            <div class="marker"><span class="np">0</span></div>
             <div style="cursor:pointer" ><span class="np" ></span></div> 
        </a>
        </li> 
        
       
        <li class="nav-item">
          <a class="nav-link selected">
            Profile</a>
        </li>

        <li class="nav-item">
          <a class="nav-link selected">
            Logout</a>
        </li>
      </ul>
    </div>

</nav>
<!--/.Navbar -->