Streaming live at 10am (PST)

Change Line-height with Interactions


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?



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

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


Hey Dave.
Here you go:



Anyone have thoughts on this? Thanks in advance!


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

closed #6