Streaming live at 10am (PST)

Change Line-height with Interactions


#1

I am animating the navigation on scroll. I am making it 60px in height on scroll (downsizing from 100px). Everything works great except the navbar has a line-height of 100px. So the links don't vertically center when the interaction happens. Is there a workaround for this?

Thanks,
Josh


#2

Hi @speck, I am here to help smile Could you please share the read-only link to the site with the interaction?

http://help.webflow.com/general/guidelines#how-do-i-share-my-sites-read-only-link.

I am happy to look if there is a workaround for this smile Cheers, Dave


#3

Hey Dave.
Here you go: https://preview.webflow.com/preview/navdemo?preview=5a73ac2c76b41b72809b5286197e1caa

Thanks,
Josh


#4

Anyone have thoughts on this? Thanks in advance!


#5

Hi @speck, thanks a lot for the read only link. May I ask, why you are needing a line-height of 100px? is it to add spacing in the menu? I would not use line-height to affect positioning of an element relative to other elements. Instead, I would use padding and margin to space your menu items and align those.

The interaction does not support changing the line-height, only the height of an element. If you use paddings and margins and height for your navbar, then the interaction should work better smile

I hope this helps, let me know if you need some help with the navbar.

Cheers, Dave


#6