Sticky menu with different logo

Pat · December 21, 2020, 10:33am

Hello
Thank you for your precious help on this forum.
I would like my logo on my navigation bar to change size on my homepage when scrolling and this script is what I am looking for. So I placed this one in my footer homepage :

It doesn’t work in preview mode on Blocs but it works very well in preview mode in browser. On the other hand, as soon as I upload the files on my server and access my site via a browser it doesn’t work.
You can see it on : www.lemoulinduboisset.com

What’s the problem?

Thank you for your help

PeteSharp · December 21, 2020, 10:50am

Hey @Pat

You have another script with a typo. remove the #

Also you shouldn’t need to load two logos to make them resize (unless they are different). You can have the size of the image change.

Pat · December 21, 2020, 10:56am

Thanks for your reply. I removed the #

So how can I make my logo smaller, to take up less space on the screen, when scrolling?

Thank you

PeteSharp · December 21, 2020, 11:03am

There are a couple of ways. You can use the same script and modify it, to add some inline CSS, to change the width and height, or you could use transform scale.

That would look something like…

Replace the two var for the logo with

var logo = document.getElementsByClassName("navbar-brand")[0];

Replace both actions that change the src with the following line, and adjust the scale to suit.

logo.style.transform = "scale(1)";

To go smaller replace the 1 to something like 0.7 etc.

I haven’t tested this, but I am also about to head off to bed.

Pat · December 21, 2020, 12:38pm

Great it works well only in preview mode but not in a browser. And I would also like my navigation bar to have the reduced size as you can see on the other website pages.

Any ideas?

Good night

Pat · December 22, 2020, 9:05am

Hello
It’s really strange. It doesn’t work on a browser, only in preview mode. But when I click on the Logo, its size decreases. You can try: www.lemoulinduboisset.com.
Yet I didn’t put any action on the Logo.
Need some help, please ?
Thanks a lot

PeteSharp · December 22, 2020, 9:11am

You still have an error on the page, also multiple entries for the same scripts. You might want to remove some of the duplicates.

And you are missing a ; on the script. I have PM’d you the amended code.

MarcoZ76 · January 29, 2023, 11:09am

Hi Pat, could you post the final script? still cannot work for me. Thanks

Pat · January 29, 2023, 9:49pm

Here it is.
Now I use SmartNav.

MarcoZ76 · March 13, 2024, 9:09am

Hi! still not working for me. I’m using Blocs 5.2 , could someone explain step by step how to resize the navbar bloc (logo and menu) when scroll down the webpage?
I can do resize adding this class " .sticky navbar-brand img " to logo changing the Width but it’s not smooth…
Maybe with a tutorial would be great.
Thanks in advance