A neat header effect some sites are using is to have an initially invisible header menu with just the logo showing over the content of the page. Then when the user scrolls down the header is revealed and the logo takes up its rightful place within it. Here's how to achieve this effect in the Divi Theme.

Note that Divi has a setting in the customizer "Header & Navigation > Header Format > Hide Navigation Until Scroll" which almost does what we want, but not quite, as it hides the logo along with the rest of the header. It also fades in from the top whereas the method I describe below causes the menu to fade in, already in place, when the scrolled. Please make sure the "Hide Navigation Until Scroll" option is disabled if you want to follow this post.

Hide the Primary Menu Bar

Select the "Header & Navigation" section, followed by "Primary Menu Bar". This shows the options for styling the main header when it is in it's normal (non-scrolled) state.

We need to use several options to hide the header the way we want.

• Background Color: Click on the "Background Color" option and you'll be shown a color picker box with two sliders to the right of it. We want to make the background entirely transparent for this header state, which we can do by dragging the rightmost slider (which controls transparency) right to the bottom. This should make the header background disappear and the page behind it show through.
• Text Color: Now do the same with the "Text Color" setting to make the navigation links disappear.

Things might look right now, but wait… if hover over where the navigation links were you may see some of the links / sub menus appear. I suggest going through each of the other color pickers and repeat the process of making them transparent.

Now, the only thing showing should be your logo, so save the customizer settings.

Style the Fixed Navigation Settings

To make sure your site is using a fixed header, you can go into "Divi > Divi Theme Options > General" from the WordPress dashboard, and make sure "Fixed Navigation Bar" is enabled.

Now return the theme customizer, this time to "Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings". Here we can style the fixed header. To begin, scroll the webpage preview down a bit so that the fixed header is shown.

• Hide Logo Image: Make sure this option is not selected, or else the logo will disappear when we scroll down.
• Primary Menu Background Color: This is the main option we need to set. You can use the color picker to set the background color for your header. You may also need to use the rightmost slider to set the transparency. Make sure it isn't right at the bottom unless you want the background to remain hidden.

You probably will also want to play about with the other color pickers until the nav links and dropdown menus look the way you want to.

Save the customizer options, and your header should now be hidden until scrolled.

I suggest testing your menu once again (outside of the customizer) to make sure things look as you want them to – sometimes things can look a bit different in the customizer to what they do on the actual site. Likewise if you find the customizer settings aren't affecting the preview the way you'd expect, try saving them – you might find the settings look correct on the final site.

Hide the Header on a Single Page (Using CSS)

The following CSS initially hides the header (except for the logo) on the homepage only:

If you are using the WordPress blog layout as your homepage, change each occurrence of "body.home" to "body.blog". And if you want to apply the effect on some other page, change "body.home" to "body.page-id-123" where "123" is the ID of your page.