[Brooklyn theme] - Make navigation bar smaller on mobile & shrink the navigation bar on scroll

Highlighted
Shopify Staff
Shopify Staff
2 0 1

Hey there, I'm having two problems currently

1- I'm trying to shrink the size (make the height of the entire navigation bar containing the logo smaller, but only on mobile), as it's taking a good portion of the screen currently. 

2- I'm trying to add a nice "shrinking" effect on the navigation bar on scroll. Something like this website: https://heinztohome.co.uk/ I tried the code given in these solutions https://community.shopify.com/c/Shopify-Design/Add-a-Floating-Navigation-bar-Header-to-Brooklyn-Them... & https://community.shopify.com/c/Shopify-Design/CSS-shrink-logo-on-scroll-up/td-p/755901 but nothing seems to work unfortunately.  If I can get this right, my problem #1 will be solved on mobile, as the bar will be smaller on scroll.

My store: https://www.knockoutwatches.com/

Thanks a lot for your help