Top Image Header with Sticky Menu


Create a New Template

From the WordPress admin, go to Divi > Theme Builder then Add new Template.  You will then be asked to choose how you want this new template to be applied to your pages or posts.  For this example, choose All Pages.

Next, click Create Template.


Now click Add Custom Header then on the subsequent options click Build Custom Header.


Add Elements to The Template

Once the Divi Builder screen is displayed, you will be presented with the Insert Row dialog where you will choose the full width row.

Then select the Image Module in the Insert Module dialog.

Click on the image placeholder then select or upload your header image using the media library the typical WordPress way.

Before clicking the green checkmark, in the Design tab go to the Spacing section and set Margin and Padding Top and Bottom to 0.

Next, add a new row, full width (as we did above) then select the Menu Module.

Now you can select the menu of your choice then add your logo (if desired).

Keep in mind that when adding a menu using this method it does not follow the formatting set in the Theme Customizer.  Therefore, be sure to go to the Design tab of the Menu Module and in the Sizing section set the logo max height and other attributes.

Now select the Advanced tab, click CSS ID & Classes and put mystickymenu in the CSS ID field.

Before clicking the green checkmark, in the Design tab go to the Spacing section and set Margin and Padding Top and Bottom to 0.

Finally, add a new row, full width and with a Code module.  Add the following code to it changing ‘200’ to your actual image header height. Note that this does not consider mobile view and will require more code.

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    document.getElementById("mystickymenu").style.position = "fixed";
  } else {
    document.getElementById("mystickymenu").style.position = "";

As with the other modules, set the spacing to 0 like so:

Tighten Things a Bit

Lastly, tighten up the spacing a bit.  Modify the Row setting of each of the two rows by clicking on the gear icon.

Then select the Design tab then go to the Spacing section and set as follow:

Repeat the same for the Section.

Save your template, close the editor and finally click the Save Changes button near the top of the Divi Theme Builder page.  If everything went as planned you can test your pages and you should now have a header image with a sticky menu below it similar to this page.

I have tried to be complete in this explanation but also assume you have a pretty good working knowledge of Divi and the Divi Builder.  If you have any questions or comments please let me know.  This will need some additional customizations to work well in the mobile view as the header height will likely be different.

This example has a “jump” when the threshold is reached that makes the menu sticky.  This is because the space that the menu item normally takes up is gone when the menu section position changes to ‘static’.  This causes the content to jump up the equivalent of the number of pixels that the menu is tall.  This can probably be corrected using some clever CSS, additional JS or perhaps an entirely different method that I am not thinking about right now. For the purpose of this demo I have not tested any solutions.

Download the JSON template for this here (right-click then save-as) > Top-Image-Header-with-Sticky-Menu.json