Build Beautiful WordPress Websites Using Divi and Divi Builder

How To Hide The Header While Scrolling Down On Divi

Rifat Divi Tutorials May 12, 2021

A header captures the essence of a website because users can understand what they will get from this website from the header. It would not be wrong to call it a kind of invitation that helps attract visitors. If we want to highlight the hero section of our website, where the top navigation bar creates a distraction, should we omit the navigation bar? Never!

With Divi's Sticky option, we can design where the Hero section of our website will be displayed without the navigation bar after the website is loaded, and scrolling will unleash the header bar. It's a win-win situation. But how to design such? That is what we will see today.

Sneak Peak

We will have a look at our design outcome before we jump into the main section.

Build: Header Structure

Create Global Header From Dashboard

Go to "Theme builder" option under Divi from your dashboard and choose "Build Global Header" from the option shown in picture.

Create Amazing Websites

With the best free page builder Elementor

Start Now

Settings: Global Header Section

Background Color

After selecting the header template, go with the "build from scratch." Then open the layer option, and you will see a pre-created section. Open settings for the section and change the background.

  • Background Color: #002854

Spacing

Under the design tab, alter some spacing values.

  • Top Padding: 0px
  • Bottom Padding: 0px

New Row Adding

Column Structure

Add the following row that is marked column structure to the section.

Background Color

Before we add any module to this row, let's make some adjustments. Start with the background color.

  • Background Color: #002854

Sizing

Under the design tab, change sizing values of the row.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

Spacing

Now, change the padding values too.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Left Padding: Tablet & Phone: 5%
  • Right Padding: Tablet & Phone: 5%

Settings: Column 1

Background Color

After designing the whole row, we will start designing column 1. First we will add a background color.

  • Background Color: #85A8B2

Add: Menu Module To Column 1

Menu Selection

Now we will add a menu module to column 1. Choose a menu according to your choice.

Logo

Now, add a logo to your header.

Background Color

Now add a background color.

  • Background Color: #063765

Background Image

Now add an image of your choice and make the following adjustments.

  • Background Image Size: Fit
  • Background Image Position: Center

Settings: Menu Text

Move on to the module’s design tab and change the menu text size.

  • Text Color: #ffffff
  • Menu Text Size: 18px

Settings: Drop down Menu

Now, alter the dropdown menu settings as follows :

  • Dropdown Menu Line Color: rgba(0,0,0,0)
  • Mobile Menu Background Color: #ddc1a7
  • Mobile Menu Text Color: #063765

Settings: Icon

Now, turn all the icons white.

  • Shopping Cart Icon Color: #ffffff
  • Search Icon Color: #ffffff
  • Hamburger Menu Icon Color: #ffffff

Sizing

Then, modify the logo sizing settings.

  • Logo Max Width: 70px

Spacing

Make some changes into padding.

  • Top Padding: 1%
  • Bottom Padding: 1%
  • Left Padding: 5%
  • Right Padding: 5%

Box Shadow

Add some changes into custom box shadow.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.3)

Transform Translate

Now, finish the module settings by modifying the transform translate settings as follows:

  • Right: Desktop: 20px, Tablet & Phone: 0px

Add: Button Module To Column 2

Button Module Setting

Add button module to column 2 and add some text of your choice.

Button Alignment

From the design tab, change button alignment.

  • Button Alignment: Right

Button Settings

Then, change the button style accordingly.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 16px
  • Button Text Color: #2a2a2a
  • Button Background Color: #ffffff
  • Button Border Width: 0px
  • Button Border Color: rgba(0,0,0,0)
  • Button Font Weight: Bold
  • Button Font Style: Uppercase

Spacing

Add some custom padding to make shape to the button.

  • Top Padding: 20px
  • Bottom Padding: 20px
  • Left Padding: 40px
  • Right Padding: 40px

Box Shadow

Now we'll add a box shadow(marked one).

  • Box Shadow Blur Strength: 30px
  • Shadow Color: rgba(0,0,0,0.18)

Transform Translate

We are almost done with the module. Finish it with some adjustments on the transform section.

  • Right: Desktop: 50px, Tablet & Phone: 0px

Add: Sticky Effects To Header

Row Settings

We have completed the construction of our header section structure. Now we will add a sticky effect to it. For this, we need to change some values from the row settings.

Position

First, make the position adjustments.

  • Position: Absolute
  • Location: Top Left

Sticky Settings - Scroll Effects

Next, we’ll open the section settings and allow it to stick to the top.

  • Sticky Position: Stick to Top
  • Bottom Sticky Limit: None
  • Offset From Surrounding Sticky Elements: Yes
  • Transition Default and Sticky Styles: Yes

Animation

Now we will add an animation so that visitors will not see the header during page loading.

  • Animation Style: Fade

Transition Duration

By changing the value of the transition span, we will select how fast or slow the header will be visible during scrolling.

  • Transition Duration: 800ms

Transform Translate

Since we don't want to show our headers initially, we will add a negative value to the Y-Axis from the Transform settings.

  • Right: -300px

Now from the sticky settings, make the value 0 again. Means, it will show us the menu as soon we start scrolling.

  • Sticky Right: 0px

 CSS Property For Visibility

In this section, we will add a CSS property to hide the elements that are not being used. It should be noted that this is not a mandatory task, but it is a good idea to do this.

visibility: hidden;

Now we'll again make our menu visible in a sticky state.

visibility: visible;

Final Result

Since we have done all the steps successfully , here is our final result.

Final Words

In today's tutorial, we have seen how to make visitors focused on the hero section and work on the navigation bar regarding visibility. Divi is a great theme with built-in features that allow us to design something unique and fun. We hope you'll like today's post and if you have any queries and questions, please, feel free to ask in the comment section.