Hove Animation in Navbar resizes the holding div

Design help Animations & Interactions
1

Hi there,

check the loom video. When i hover a navlink i used a hover animation. it works how it should, but if you hover between “partner” and “maulkorbberatung” the div jumps and i cant figure out why.

Here is my public share link: LINK

Staging Site: Einzeltrainings

1 Like
2

Hi @BronkoKulitchka

Please apply the following changes,

1- .underline-hover { position: absolute; left: 0px; bottom: 0px;}

2-.navbar-link-block { position: relative; padding: 10px 5px; margin: 0 20px }

These changes will fix the jump issue, if you need help happy to do that.

2 Likes
3

hei, sry for the late reply. the underline hover is now above the textlink.

Edit: It works for the main navlinks, but for the subcat navlink in “hundetraining” it doesnt. I want the underline hover not stretched out further than the navlink text. i left the settings on “einzeltrainings” for you…

2 Likes
4

You forget to add style .underline-hover {bottom: 0px;} add this

also for the dropdown, you have to write a good code, you have different padding for first and last dropdown item, and line is not aligned on first dropdown item and last dropdown item. keep the style consistent.

1 Like
5

is your task is done? are you able to fix it?

1 Like
6

ok, i got it. i had to change the padding in the dropdown links. now i got just one problem - first dropdown link “einzeltrainings” the underline spreads till the end of the dropdown list. i didnt manage to have the underline div shrink to the textlinks size. any idea?

and thank you so far. <3

1 Like