Nav element keeps growing

1

Is there an easy way to keep the nav item from growing the couple of pixels from my animation?
https://codepen.io/JasonEliasen/pen/rboeYV

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

2

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
3

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.

4

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

5

https://codepen.io/JasonEliasen/pen/rboeYV

6

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

7

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
8

yup that did it! thank you

9

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

10