Change fixed header logo while scroll down

Asked Mar 26 '19 at 11:29

Active Apr 11 '20 at 19:17

Viewed 308 times

I need to change logo in fixed header while passing different sections.

If you take a look at this site, it changes color while scroll down. I need to have this function in my website. This is the site that I am working on right now.

Built with WordPress divi theme.

Tried new things but none of it is working. Can anyone recommend how to code this function?

I tried to use custom css inside divi module but it is not working.

I have this css code it was used for regular heading to sticking heading.

#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
 
}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

So, when user scroll down and passing different section this .et-fixed-header #logo .et-fixed-header #logo.second-logo

I want opacity change dynamically while scroll down and pass different section.

edited Mar 27 '19 at 15:39

asked Mar 26 '19 at 11:29

bitmon

Please join css you are working one with a test page. – LeBigCat Mar 26 '19 at 11:33
please share the css class you created for the header – Seba Cherian Mar 26 '19 at 11:34
i am sorry first time in stackoverflow. let me see if i can do that – bitmon Mar 26 '19 at 11:35
@SebaCherian .et-fixed-header #logo.second-logo – bitmon Mar 26 '19 at 11:36
apply style position: fixed; to the header class. – Seba Cherian Mar 26 '19 at 11:36
@SebaCherian i added more details into question see if that clears better for you. – bitmon Mar 26 '19 at 11:42
@LeBigCat i think i did can you please review question one more time? thanks – bitmon Mar 26 '19 at 11:44

Change fixed header logo while scroll down

0 Answers0