How can I shrink my navigation logo when scrolling?

Store Design
1

I am trying to shrink my navigation on scroll.

https://www.w3schools.com/howto/howto_js_navbar_shrink_scroll.asp (Just like this concept)

thank you

2

Hello, @dhsk11

Thanks for post

are you able to code can you please try

https://codepen.io/mrmrp/pen/VYjZwW

or

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

3

The reference link you posted was difficult to implement with the current theme I was using. However, the following link helped me out:

https://stackoverflow.com/questions/39152148/cannot-set-property-width-of-undefined/39152208

To anyone else who need the solution to this, here is what I did.

I made a custon.js file.

window.onscroll = fucntion() {
  shrinkAndGrowLogo();
};

function shrinkAndGrowLogo() {
  var logo = document.getElementById("Your_Logo_Image_ID");
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop >200) {
    logo.style.width = "100px";
    logo.style.transition = "0.2s";
  } else {
    logo.style.width = "160px";
  }
}
4

Hello

Thank you for the solution code, you just create a js. file and it’s done, or you have to refer somewhere the js file?