When creating your global header, there are a lot of things you need to consider. The elements you put in your header should help your visiteurs to navigate easily. To reduce the time people spend browsing, many web designers opt for a fixed top header, allowing visiteurs to immediately access other pages or publications. This is really handy, but when creating a fixed header, much of the height of your viewport visiteurs is busy, which allows less than contents to display at once. If you're not ready to make this sacrifice, know that you don't have to. You can reap the benefits of a fixed header by allowing your overall header to reveal when your visitors scroll up and hide it when they scroll down. Today we'll guide you through hiding and revealing your global header using Divi's Theme Builder.

Preview

Before we dive into the tutorial, let's take a look at the result on different screen sizes.

1. Go to Divi Theme Builder and add a new template

Start by going to the Divi Theme Builder.

Start creating a global header

There, click on "Add a global header" and select "Create a global header".

2. Start creating a global header

Section settings

Background color

Inside the template editor, you'll notice a section. Open this section and change its background color.

• Background Color: #ffffff

sizing

Go to the design tab and assign a width of 100% to your next section.

• Width: 100%

Spacing

Also add custom upper and lower padding.

• Upper padding: 2vw
• Bottom padding: 2vw

Shadow box

We will also apply a subtle shade to our section.

• Box Shadow Blur Strength: 50px
• Shadow color: rgba (0,0,0,0,08)

CSS ID

Later in this tutorial, we'll need some custom code for the scrolling effect to occur. To prepare for this, we add a CSS ID to the section.

• CSS ID: global header section

Main element

We'll also make the section a fixed header by adding two lines of CSS code to the main element of the section.

position: fixed;top: 0;

Z Index

Now to make sure our section appears at the top of the page or contents of the post, we will also increase the z-index in the visibility settings.

• Z Index: 99999

Add a new line

Column structure

Once you have finished all the section parameters, continue adding a new line to the section using the following column structure:

sizing

Without adding a module yet, open the row settings and let the row fill the entire width of the screen.

• Use a custom gutter width: Yes
• Gutter width: 1
• Equalize column heights: Yes
• Width: 100%
• Max width: 100%

Spacing

Also remove all of the default upper and lower padding.

• Upper padding: 0px
• Bottom padding: 0px

Main element

center it contents of the column and allow the columns to remain side by side on smaller screen sizes by adding two lines of CSS code to the main element of the row.

display: flex;align-items: center;

Add the social media tracking module to column 2

Add social networks

It's time to add modules, starting with a social media tracking module in column 1. Add the social networks you want to show.

Reset individual social media styles

Continue by resetting the styles of each social network to an individual level.

Add an individual social network space

You will also need to open the settings for each social network individually and add bottom padding in the spacing settings.

• Bottom padding: 0.5vw

Alignment

Once you've individually added the bottom padding to each social network, go back to your mod's general settings. Switch to the design tab and change the module alignment.

• Alignment of the module: center

Default icon settings

Also change the icon color in the icon settings.

• Icon Color: # 000000

Hover icon settings

And change the color of the hover icon.

• Icon Color: # c2ab92

Border

Complete the module parameters by adding a lower border in the border parameters.

• Bottom border width: 1px
• Bottom border color: # 000000

Add a menu module to column 2

Select the menu

Let's move on to the next column! Add a menu module and select a menu of your choice.

Download logo

Then upload a logo in the module.

Remove background color

And remove the background color.

Disposal

Then switch to the Design tab and make sure the following settings apply to the layout:

• Style: Centered
• Direction of the drop-down menu: down

Default menu text

Continue by changing the menu text settings as follows:

• Active link color: # c2ab92
• Menu font: Cormorant Garamond
• Text color: # 000000
• Menu text size: 1vw (desktop), 2vw (tablet), 3vw (phone)

Hover menu text

Change the menu text on hover.

• Menu text color: # c2ab92

Drop down menu

Then change the color of the drop-down menu line in the drop-down menu settings.

• Color of the line of the drop-down menu: # 000000

Icons

We are also changing the color of the hamburger menu icon in the icon settings.

• Hamburger menu icon color: # 000000

sizing

Continue by changing the maximum logo width on different screen sizes in the sizing settings.

• Maximum logo width: 5vw (desk), 10vw (tablet), 13vw (phone)

CSS Link Menu

And complete the module settings by adding two lines of CSS code to the module menu link in the advanced tab.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Add a text module to the 3 column

Add a copy

Let's move on to the last module! There the only module we need is a text module.

Ajouter un lien

This module will serve as a CTA. Add a link of your choice.

• Module link URL: #

Default text settings

Switch to the module design tab and change the text settings accordingly:

• Text font: Cormorant Garamond
• Text color: # 000000
• Text size: 1vw (desktop), 2vw (tablet), 3vw (phone)

Hover text settings

Change the color of the text on hover.

• Text color: # c2ab92

sizing

Continue by changing the module sizing parameters on different screen sizes.

• Width: 12vw (desktop), 18vw (tablet), 22vw (phone)
• Alignment of the module: center

Spacing

And add some bottom padding in the spacing settings.

• Bottom padding: 0.5vw

Border

Complete the module parameters by adding a lower border.

• Bottom border width: 1px
• Bottom border color: # 000000

Add a code module to the 2 column

Insert JQuery and CSS code

Once you've styled all of the mods in the row, it's time to make the reveal / hide effect happen. To do this we will need to add custom code to a code module that we will place in column 2. This code will work on any section you add, no matter how you design your header or the modules. that you are using, just make sure you have added the CSS ID to your section. Place JQuery code between script tags and CSS code between style tags as shown in the print screen below.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Save the generator modifications and display the result

Once you have completed the global header, save all changes and view the result on your Website!

Preview

Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.

Latest Thoughts

In this article, we've shown you how to make your global header appear when scrolling up and hide it when scrolling down. This is a popular and effective way to help your visitors navigate easily without taking up a portion of their window height. You could also download the JSON file for free! If you have any questions or suggestions, feel free to leave a comment in the comments section below.