In this blog we will learn How to transform or convert Custom Global Header which you have already created in Divi to Sticky Header. After going through this blog you will know how to use scrolling effect of The Divi Builder.
Before we start with “Sticky Header in The Divi Builder” make sure that you have Custom Global Header already Created. Incase you don’t have created or don’t know how to check out our blog “How to Create Custom Global Header in Divi“.
In pervious tutorial we created Custom Global Header as show below. We will use this header and transform it in to sticky header or fixed header. Here we will learn everything you need to know about creating sticky/fixed element in Divi.
Step 1 : Login to WordPress Dashboard and navigate to “Divi ->Theme builder ->Global Header”.
Step 2 : Here we have our section having row of 3 cloumns, now it’s time to sticky this section at top. We will achieve this functionality using scroll effect in Divi. Incase you have more then one section in Global Header in Divi you can set this setting on any one of the section. We will discuss this in upcoming tutorial.
Open Section Setting and navigate to “Advance” Tab. There you have to locate “Scroll Effect”. Here in “Scroll Effect” change sticky position to “Stick to Top”. Also check if other setting are as shown Below.
Step 3 : As we have made our section “stick at top”, Divi will automatically activate “sticky” option in each and every “rows” as well as “columns” which are in particular section of Divi. So let us use this setting to change background color or gradient of section on scroll.
For an instance we need to change background color on scroll, To do so navigate to “Section Settings -> Content -> Background”. You can see that we have gradient all set on background. Here you will see a pin icon.
Click on this Icon to set Sticky Element Background. Remove gradient and set background of section to white as shown below.
You can also apply gradient instead of solid color.
Make Sure that you only remove gradient for Sticky section and not from any other view.
As you can see we have set background color to white and text color of logo & menu is also white. So on scroll its not visible. To make it visible on scroll change it to black.
We have create Text logo in pervious tutorial so to change color of logo navigate to “text settings->Design->Heading Text Color” and then click on pin icon (Sticky), Then select black color as shown below.
Similarly change text color of menu as show below as show below.
Step 4 : Now as we can see that website color and header color is white so to make body visible separate from header will apply Box Shadow on scroll.
Note :- You can’t apply Box Shadow only on scroll you have to apply it on section for normal view as well as scroll.
we have to apply box shadow on section, to do so click on “Section Settings” then navigate to “Design” tab and there click on “Box Shadow” as show below this will set shadow on your header.
Trackbacks/Pingbacks