Solved Header 12. Change background color on Scroll. Works but displays changed color on page load.

Hello thanks for all your help and I have another question. Using header 12 I want to change the color of the background when I scroll. I have implemented this and it works as intended besides when the page loads. The changed color is already displaying. If I scroll down and scroll back up the menu changes in the way it's intended just not on the original page load. I have added a link below and have pasted in the code that i have edited. Thanks!

https://www.smartdata.net/

Code added to header 12 code section:

.pa-header {
background: transparent;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
}

.pa-fixed-header {
background-color: rgba(0,0,0,0.8);
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
}

 

While that worked in not having the menu background display black. The menu is now loading in its own section above the page sections, it is not loading overtop of the section below like before. Check link now https://www.smartdata.net/ Thanks very much and sorry for the confusion

 

That worked perfectly! Thanks again so much for the help you guys are the best!