Quick Divi Tutorial: How to hide the header when scrolling


A very cool effect that a client recently asked me for is that the header of a website made with Divi would be totally hidden when the user scrolls, when browsing the page.

I don’t mean to hide Divi’s main menu or to hide Divi’s secondary bar when scrolling, but to hide the header completely, with everything it contains.

The solution is very simple, just add a line of CSS.

Open the WordPress theme customizer (Appearance > Customize > Additional CSS) and add this:

/* Hide fixer header when scrolling */
  .et-fixed-header { display:none; }Code language: CSS (css)

And you’ll go from this:

To this when you publish the changes:

Easy and simple with Divi.

Read this post in Spanish: Tutorial Divi rápido: Cómo ocultar la cabecera al hacer scroll

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

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

Scroll to Top