Your Divi header is arguably one of the most important areas of your site.

 

As the first thing that visitors see, your header sets the tone for the rest of your site. It announces your name, shows off your logo, and gives your audience the first taste of your branding.

 

Beyond that, it contains vital information to help your site visitors navigate easily.

 

So it’s essential that your Divi header’s layout is styled for both visual impact and ease of use.

 

Whether you want a header that stands out and boldly announces its presence or a more low key header that focuses all the attention on your content, Divi’s endless styling options make the process easy.

 

In this quick tutorial, I’ll show you how to achieve the look you want with just a few Divi header  WordPress customization tips.

 

We’ll look at how to create a Divi header that puts the focus on your content, by either reducing the header size or deactivating the default Divi sticky header.

 

I’ll show you how to hide navigation until scroll, so that visitors can get the full impact of your awesome content.

 

 

We’ll also get into how you can create a cool transparent Divi header that puts the spotlight on the rest of your page.

 

Finally, I’ll show you how to add an awesome gradient to your header, for a little extra design bling.

 

And best of all, (with the exception of adding a gradient to the Divi header) we’ll do all of this with the Divi customization options alone.

 

No code necessary!

 

Ready?

Let’s do this!

 

1. How to Reduce the Size of the Divi Header’s Primary Navigation Menu:

 

As I mentioned, your website’s header is an essential branding and navigational tool.

 

With that being said however, you may not necessarily want your Divi header to be the most prominent part of your page.

 

As you’ve probably noticed, the Divi theme allows your Divi header to follow you down the page as you scroll.

 

This type of sticky header is great if you have a super-long page and want to be able to direct your visitors to important links on your site.

 

But if you just want your visitors to be able to fully view and read your content, a sticky Divi header can be pretty distracting.

 

Especially if your header happens to be pretty large.

 

Luckily, you can easily fix this problem with just a few quick tweaks:

 

Want to keep your header’s information visible but prevent it from blocking your visitors’ view of your page? No problem.

 

By default, the Divi header starts off full size and shrinks as you scroll. But if you want to reduce the chances of your header being distracting even more, simply reduce the size of your Divi header’s primary navigation menu.

 

A great example of this is the header on Elegant themes’ blog posts.

 

It’s a fixed header so it remains visible as you scroll down the page, but it’s compact enough to allow you a clear view of the content you’re reading.

 

To achieve a similar effect, simply:

1. Head to your website and login.

 

2. Then enter the Theme Customizer by clicking on Divi > Theme Customizer within your WordPress Dashboard.

 

Divi Header Customization, Reduce Divi Header Height

 

3. Scroll down and select the “Header & Navigation” panel.

 

Divi Header Customization Header and Navigation

 

4. Here, select “Primary Menu Bar”.

 

Divi Header Customization, Decrease Divi Header Size

5. Then go to “Menu Height” and select a height that allows your header’s information to be visible, without taking too much attention away from your content. As you slide the bar up and down, you’ll be able to preview your changes to the right of the Theme Customizer.

 

6. Once you’ve found the perfect Divi menu height, simply click “publish” and exit the Customizer.

 

Divi Header Customization, Reduce Divi Header Height

 

Decreasing the Divi header’s height allows users to see your page and still have access to your menu.

 

But what if you want the focus to be completely on your page’s content and not the header?

 

An easy solution is to hide the Divi header when scrolling.

 

2.  Disabling the Fixed Divi Header:

 

Maybe you’d rather draw all of the attention to your page content instead. In that case, you could disable the fixed Divi header altogether.

 

This option works especially well when you’ve got important information or an offer on your page and want it to be seen without any distractions.

 

Here’s how to disable the fixed Divi header:

 

  1. Log into your WordPress dashboard

 

 

  1. Head to”Divi > Theme Options” . Here, under the”General” tab, scroll down to  “Fixed Navigation Bar”.

 

Divi Header Customization, Disable Fixed Divi Header

 

3. Set this option to “Disabled”. Finally, scroll down and save your changes.

Your Divi header will now no longer be a sticky fixed header. Instead, it will remain at the top of your page and allow you to scroll without following you.

 

 

3. How to Hide Your Divi Header Navigation Until Scroll

 

Have a stunning full screen header that you want to keep all eyes on? Don’t want your menu links and logo to get in the way but still want to make it easy for users to get around?

Then why not simply hide your navigation until after users scroll?

This way you get the best of both worlds; your amazing header gets all the attention, but you can still direct users with helpful navigation links.

 

The best part is that you don’t have to apply this effect to every page of your Divi website.

Instead, you can pick and choose which pages you want to hide the navigation before scroll on.

To hide navigation until scroll in Divi:

  1. In your dashboard, head to Divi >> Theme Customizer.

 

  1. In the Theme Customizer, go to “Header & Navigation”

 

  1. Select “Header Format” and check the box that reads “Hide Navigation Until Scroll

 

  1. Hit “Publish” to save your changes.

 

Divi Header Customization: How to Hide Navigation Until Scroll Only On Certain Pages

But what about if you only want to hide navigation until scroll on certain pages of Your Divi site and not others?

 

Easy! You can turn off this feature on any page you choose.

 

To do so:

 

  1. Head to the page you want to turn off the “hide navigation until scroll” feature on.

 

 

  1. Then, in the backend Divi builder, find “Divi Page Settings” on the top right of the screen.

 

Divi Header Customization, Hide Navigation Until Scroll

 

3. Here, scroll down and locate the “Hide Nav Before Scroll” Click the drop down menu below this and select “Off”.

 

4. Scroll down and hit the “Update” button to save your changes. Your navigation will now be hidden until after your users scroll on other pages, but will be visible before scroll on this page.

 

4. Divi Header Customization Trick: How to Add a Gradient to The Divi Header

 

A pretty cool way of styling your Divi header for more visual impact is to add a gradient effect to its background.

 

Gradients are a classic web design staple but have been even more popular than ever recently.

 

The easiest way to achieve this effect is to pop a quick line of CSS into your Divi Theme Customizer’s “Additional CSS” section.

 

 

For my gradient here, I’ve used a light pink (#fbd2d7) and white(#ffffff), but you could use any color combination you like.

 

I’ve also chosen to have my gradient go to the bottom left, but again, you can choose any gradient direction you prefer for this.

 

 

To add a color gradient to your Divi header:

 

  1. Log in to your Divi site and select the Divi Theme Customizer from your menu.

 

 

  1. In the Theme Customizer, scroll down to the “Additional CSS”

 

Add Divi Header Gradient Background

 

 

3. Here, add the following line of CSS:

 

CSS for Divi header gradient background

 

(Note: You can also change the color codes and the gradient direction to the colors and direction you prefer. Keep in mind how your Header text will look against the gradient colors you choose. If they are too similar, you risk your text being hard to see. Make sure you adjust your Divi header text color for visibility.)

 

CSS for Adding Gradient to Divi Header Background:

 

 


#main-header {
             background: linear-gradient(to bottom left, #fbd2d7 0%, #ffffff 100%);

} 

 

4. Scroll up and hit the “Publish” Exit the Theme Customizer and you should now see that your Divi Header has a beautiful gradient background, like this:

 

How to add gradient background to Divi header5. Divi Header Customization Trick: How to Make a Transparent Header in Divi

 

It’s become super popular recently to feature a powerful full screen image with a transparent menu header. If your site design features eye-catching images, I’d recommend creating a transparent header.

 

That’s because a transparent header allows your navigation links to overlay your image without blocking it. This way, your site visitors can focus on the image rather than being sidetracked by the navigation.

 

A fixed transparent header will “disappear” into the background but still follow the reader down the page as they scroll.

 

This gives them the ability to view content seamlessly, while also being able to navigate without having to scroll all the way back to the top.

 

Want to achieve this look for your site?

 

Luckily, it takes literally seconds to create a transparent header in Divi and requires no coding on your part.

 

Here’s how it’s done:

 

  1. Log in to your WordPress dashboard and select Divi >> Theme Options  

 

 

  1. Then select “Primary Menu Bar” and scroll down to the “Background color” Here, slide the opacity slider bar all the way down until it’s completely transparent.

 

Divi Header Customization, Transparent Header

 

 

3. Now it’s time to consider your Divi header’s text. If your text color doesn’t stand out against your page’s content, change it to ensure viewers will still be able to see and make use of your transparent header.

 

To do so, just scroll up to the “Text Color” option and select a color that complements your design but still allows your menu links to be seen.

 

Scroll up and hit “Publish” to save your changes.  

 

4. Then navigate back to the Header & Navigation Menu and select “Fixed Navigation Settings”

 

Here, under “Primary Menu Background Color”, slide this opacity bar all the way down until it’s transparent too.

 

Finally, scroll up and click “publish” and exit the Theme Customizer.

 

Make Divi Header Transparent

 

Take a look at your page. You should now see that your fixed Divi header is transparent. Scroll down and notice how the Divi header stays transparent as you do.

 

Your header navigation links should be overlaying your page’s image without covering it up, like this:

 

How to make transparent headers in Divi

 

And that’s all there is to it. You’ve just created a cool transparent Divi header!

 

The Wrap Up:  

 

As you’ve seen, styling your Divi header can take your site from basic to professionally branded in a few clicks.

 

Whether you tweak your header for functionality, style, or both, you’ve got endless Divi header options to play around with.

 

As a final tip, I recommend always A/B testing different header styles. This way, you’ll be able to pinpoint the Divi header layout that works best for your business and users.

 

Want even more awesome Divi Header layout tips? Check out this tutorial where I show you how to add a secondary menu with your phone number and email to your Divi header!

 

Got a neat Divi header customization tip of your own? I’d love to hear it. Share with us in the comments below!