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;
}
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;
}