i have been working on my header for my shopify store and i have some problems i want to the transparent header to become opaque on scroll and i want the background of the search bar to remain white, i have gotton most of the way there but i need some help debugging as of now the backround of the searchbar changes also on scroll and on large screens you can scroll left and right revealing an empty white space, i dont know how to fix this so somebody please help. my website is https://do-archery.com/?_ab=0&_fd=0&_sc=1
For the header, you’ll likely need to add a scroll event listener to toggle an opaque class while keeping the search bar’s background fixed. For the horizontal scroll issue, check if overflow-x: hidden; on html, body helps. I can take a quick look at your site’s CSS if you want