With minimize the size I have issue with hover effect? when hover on to nav (element)'s list items my header is changing the size

#1

codepen link :https://codepen.io/Yag/pen/ywLXKx

#2

Are you talking about the border hover effect? If so you need to account for the extra size the border gives the elements on hover.

You can add a transparent border and then just animate the border-color.

#nav-bar ul li {
  margin: 10px;
  padding: 10px;
  opacity: 0.7;
  /* transparent border */
  border-bottom: 2px solid transparent;
}


#nav-bar ul li:hover {
  animation: fadein 0.5s linear forwards;
}
@keyframes fadein {
  100% {
    opacity: 1;
    border-color: #f0eae7;
  }
}

Or just using a transition

#nav-bar ul li {
  margin: 10px;
  padding: 10px;
  opacity: 0.7;
  /* transparent border */
  border-bottom: 2px solid transparent;
  transition: border-color 0.5s, opacity 0.5s;
}

#nav-bar ul li:hover {
  opacity: 1;
  border-color: #f0eae7;
}
1 Like
#3

thank you ! it works

#4