Shrink Nav Logo when Scolling

I Need Help
1

Hi,
I need to know if it is possible to create an effect with a logo shrinking/changing when scrolling down the page?

1 Like
2

Do you mean a sticky nav or gradually shrinking at any breakpoint?

3

@apswoodwork This would be the best why to explain it:
http://snx.co.za

4

Like this?
This was made in Blocs easy enough.

5

The nav uses a class .sticky on the nav when it sticks, combine that with navbar-brand img and you should be able to target and adjust with a custom class.

Add a class (.sticky .navbar-brand img) via the class manager (keep spaces) then set the width and height via the class editor.

1 Like
6

.sticky .navbar-brand img
Is it accurate custom class name I have to add?
And where exectly should I apply that custom class? Apply to the nav bloc?

7

Already roger that by myself :grin: Thanks, Norm!

1 Like
8

How would this effect work with Blocs 3 and Bootstrap 4?
Is there a vage chance to include this behaviour in the navbar settings of blocs (e.g “sticky” + “shrink logo on scroll”) ?
In WP it´s easy with elementor + a few code snippets.

Thanks and have a great day