Facing problem changing navbar color on scroll

Store Design
1

Hi everyone. Im using refresh theme for my shopify store. I made a transparent navbar by using custom script on base.liquid file.

<script>
var sticky = document.querySelector('.header-wrapper'); 

window.onscroll = function(){
if(window.scrollY > 150) {
sticky.style.background = 'black';
}
else {sticky.style.background = 'transparent';}
}

</script>

Now Im facing a tiny problem which Im unable to solve. Navbar doing some problems on other pages. Need some help from the experts.
My shop link: www.nielapparel.com

Screenshot 2023-07-16 231923.png
Screenshot 2023-07-16 231923.png1920×995 222 KB

2

Hello @Shoaib77

I think you can just set transparent background to homepage, other pages should keep as black. That can be done by this modified code
3

Thank you so much, that solved the problem

4

In home page, I want to change the navbar background black on hover. And also the dropdown list’s border radius 0. Can you please tell me how can this be done?

5

You can add this code to the file base.css

.header-wrapper:hover {
    background-color: #000 !important;
}

.header__submenu {
    border-radius: 0;
}