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?

Thanks,
Josh

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

Learn web design with free video courses and tutorials | Webflow University.

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

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

Thanks,
Josh

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