Transparent header

Stap 1
How To Make A Transparent Header In The Divi Theme Builder
Zorg dat de background van de section op standaard staat.
Anders werkt het niet!!!

Maak de background van het menu transparant .
In de sectie: advanced/position/fixed (vast menu) of relative (menu scrolt mee)

https://www.peeayecreative.com/divi-theme-builder-header-transparent-background/

Stap 2

How To Change The Color Of A Fixed Divi Header Menu When Scrolling
Voeg een Class toe aan de sectie waar het menu in zit: pa-header

Code toevoegen:
Divi>Theme Options > Integrations tab > Add code to the < head > of your blog.

De code zit in de module hieronder

https://www.peeayecreative.com/how-to-change-the-color-of-a-fixed-divi-header-menu-when-scrolling/

Stap 3
Maak aanpassingen voor de kleur in deĀ  CSS code

/*set the defautl background color of the header section*/
.pa-header {
background: transparent;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}

/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
background-color: #000000!important;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}

Stap 4
How To Shrink The Divi Header Menu When Scrolling

Code toevoegen:
Divi>Theme Options > Integrations tab > Add code to the < head > of your blog.

De code zit in de module hieronder

https://www.peeayecreative.com/how-to-shrink-the-divi-header-menu-when-scrolling/

Stap 5
Voeg deze CSS toe

/*set the transition for the spacing shrinking action*/
.pa-header .et_pb_row {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

/*set the background color of the fixed header when scrolling*/
.pa-fixed-header .et_pb_row {
padding: 0px 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

Stap 6
You may also want to change the size of the logo when your menu shrinks

/*set the transition for the logo shrinking action*/
.pa-header .et_pb_menu__logo img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

/*change the logo size when the header shrinks*/
.pa-fixed-header .et_pb_menu__logo img {
max-width: 80%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

Stap 7
You may also want to change the size of menu text when your menu shrinks.

/*set the transition for the font size shrinking action*/
.pa-header .et_pb_menu ul li a {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

/*change the menu font size when the header shrinks*/
.pa-fixed-header .et_pb_menu ul li a {
font-size: 16px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}