Nav element keeps growing

Is there an easy way to keep the nav item from growing the couple of pixels from my animation?

I’m having a hard time absolute positioning the animation for some reason so tips on that would be appreciated if that is the only answer to this question.

Thank you

I think the question you asked here is you want to get your nav size increased at the time of animation.
Am i right? use transition property

transform: scale() inside animation

when i hover my li items on the top right it runs an animation. when the animation runs the nav element’s height grows slightly which i don’t want to happen.

now i understood ? to say the reason why the size of nav element’s heights grows slightly when you hover, please post your css code

sry to delay to replay remove height property from @keyframes grow and shrink

It will still jump on the first hover.

I think you should set the container li to be position: relative; and then use position: absolute; on .growing (you need to change the position to bottom instead)

li {
  float: right;
  position: relative;

.growing {
  position: absolute;
  display: block;
  bottom: 10px;
  height: 2px;
  width: 0%;
  background-color: var(--color-pink);
1 Like

yup that did it! thank you

Your design is awesome . How did you get this much creativity. .