Make the Divi Header Hidden Initially (but with the Logo Showing)

Written by Dan Mossop

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

First, let's hide the main header (also known as the primary menu bar). To do so, open up the theme customizer (Divi > Theme Customizer). There you'll see a preview of your site and a list of settings sections on the left.

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

Now we want to style the "fixed header". The fixed header (or fixed navigation) is the name given to the header when it is kept in place at the top of the page when you're scrolling down.

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 method described above applies to the whole site. If you want to apply the effect on a single page, then you need to use some CSS instead.

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

@media only screen and (min-width: 981px) {
    
    /* Hide everything in the header except the logo */
    body.home #main-header:not(.et-fixed-header) *,
    body.home #main-header:not(.et-fixed-header) { 
        visibility: hidden; 
    }
    body.home #main-header:not(.et-fixed-header) #logo {
        visibility: visible;
    }

    /* Move the content up to the top of the page */
    body.home #page-container { 
        padding-top: 0px !important; 
        margin-top: 0px !important;
    }
}

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.

Unlock the Full Potential of Shortcodes in Divi!

Empower your Divi site with the Divi Shortcode Enabler. This plugin allows shortcodes to run effortlessly in various Divi module fields, enhancing functionality and customization across your site.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

2 Comments

  1. Hi, great article. Is there a way that I can do this but for the home page only? I'd like the logo to stay fixed on all other pages.

    Reply
    • Hi Cara, you'd have to use CSS to do this – I don't think there's any built-in way to achieve it in Divi. I've added a section at the end of the article with (my first attempt at) the CSS you'll need. I hope it helps, but let me know if anything doesn't look right, etc. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.