Transparent navigation untill scrolling in Dawn theme

Technical Q&A
1

Sorry if I posted this in the wrong section.
Here is an example of the Navigation effect I want

Link

2

@Sombly ,

Welcome to the Community. Share the store URL please with password,

3

Sorry I dont understand your question, can you explain your self?

4

There is no password? This is not my website.

anyway the website is really not important

i want my navigation bar to be Transparent untill scrolling.

5

hi @Sombly Hope you are doing well you can do this by adding this code on global.js file

window.onscroll = function(event) {

if(window.scrollY > 90){
document.querySelector('.header-wrapper').classList.add("color-background-white");

}
else{
  document.querySelector('.header-wrapper').classList.remove("color-background-white");
    }
    };

and adding code below at the end of base.css file

.header-wrapper{
background-color:transparent;
}
.color-background-white{
background-color: **colorValueHere** !important;
}
replace the **colorValueHere** with the actual color you want
6

Thank you for your reply, unfortunately it dind’t work.

7

@arshia_sheikh I have 2 Questions

  • I put the first code in the end of Global.js , is that ok?
  • Does the color have to be a #FFFFFF or can i just write WHITE for example?
8

hi @Sombly hope you are doing well
Yes,its completely fine to put code at the end of global.js
You should use Hex color like #FFFFFF
if its still doent work than please share the link of the theme on which you try to add the code