I’ve been seeing this a lot and had a request for it from both a client and Elegant Tweak reader. The idea is to have a slider at the top of a page that fills the entire width and height of the browser window. As you scroll down, the menu and page content slide up and over the slider. Once the menu reaches the top of the page, it locks into place and the rest of the page content continues to scroll as usual.

You can view the demo here.

CSS

Locate your style.css file or edit your child theme’s style.css

Add the following:

The styles above apply to only one page on my demo site using the class .page-id-224. Replace the number with the ID number of the page you’re working on or use .home to apply it to your homepage only. I also use the ID #top-slider-224 for the ID of the fullwidth section containing the slider and #text-224 for the ID of the first section below the slider. Replace these with whatever ID you want to use.

Just to recap everything:

1. Create a page with the page builder and add a fullwidth section.
2. Give the fullwidth section an ID. In my example I used top-slider-224
3. Add a fullwidth slider module to the fullwidth section.
4. Add your background image and content to a new slide within the slider module.
5. In my example, my slide button links to the first section below the menu, creating the automatic scroll down effect when clicked. To do this, give the button URL the ID of the section you create in the next step below. In the example the button URL would be #text-224
6. Create the section you want to display below the menu and give it an ID. In my example, the ID again is text-224
7. Now you can build the rest of the page as normal, just make sure the section you just created in step 6 is the first section below the fullwidth section we created in step 1.
8. Copy and paste all of the CSS provided above into your style.css file. You can do this using a child theme or paste it directly in the Divi Custom CSS box.
9. Replace .page-id-224 with the ID of your page. You can find this by editing the page or post and hovering your cursor over the edit button below the title.  While hovering over this button, a URL will pop up in the bottom left corner of your browser with post= followed by a number. This is the number you’ll use.
10. Replace the section IDs #top-slider-224 and #text-224 with the IDs you used in step 2 and step 6 above.

The slide description has a top and bottom padding of 30%. You’ll probably want to increase this to your liking on responsive screen sizes using media queries. Notice in the smartphone screen size below I use 45vh instead of 45px just to show you the difference in the results.

If you don’t want the slider to take up the entire window height and  would like to leave room for the menu, we can use calc in our CSS to subtract the height of the header. The default Divi header height is 80px so I’ll use that below. If your header is taller, make sure you use the correct height. Replace the appropriate styles above with their counterparts below or you can simply copy the full CSS further below.

Here is the full version of the CSS if you want to leave room for the menu: