How to Create a Custom Fullscreen Global Header with Divi’s Theme Builder

Last Updated on September 16, 2022 by 30 Comments

How to Create a Custom Fullscreen Global Header with Divi’s Theme Builder
Blog / Divi Resources / How to Create a Custom Fullscreen Global Header with Divi’s Theme Builder

If you’re looking for a way to create a global header for your website that doesn’t take up a lot of space, you’re going to love this tutorial. We’ll show you how to create a fullscreen global header using Divi’s Theme Builder. While scrolling down the page, the only two things additional you’ll notice on your post/page are 1) a clickable hamburger icon in the top left corner and 2) a logo in the top right corner. These two items will follow your visitors throughout their navigation process and once the hamburger icon is clicked, a custom fullscreen menu will open and allow visitors to go to other pages on your website. The outcome of this design is highly responsive and you’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

fullscreen global header

Mobile

fullscreen global header

Download The Fullscreen Global Header Template for FREE

To lay your hands on the fullscreen global header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

1. Go to Divi Theme Builder & Start Building Global Header

Go to Divi Theme Builder

Start by going to the Divi Theme Builder.

fullscreen global header

Start Building Global Header

Then, click on ‘Add Global Header’ and proceed to click on ‘Build Global Header’.

fullscreen global header

2. Dedicate Section #1 to Fullscreen Navigation

Section Settings

Background Color

Time to start creating! Open the settings of the section you can notice inside the template editor and change the background color into a completely transparent one.

  • Background Color: rgba(255,255,255,0)

fullscreen global header

Spacing

Remove the section’s default top and bottom padding next.

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

fullscreen global header

CSS Class

Continue by adding a CSS class to the section. Later on this post, we’ll need this CSS class to turn the menu fullscreen.

  • CSS Class: section-transform

fullscreen global header

Default Visibility

Then, go to the visibility settings and hide the overflows. Make sure you increase the z index of the section too, this will ensure the section will remain on top of all page and post content.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden
  • Z Index: 999999

fullscreen global header

Hover Visibility

Once you’ve added the z index, enable the hover option and make sure the same z index is applying there too.

  • Z Index: 999999

fullscreen global header

Add Row #1

Column Structure

Continue by adding a first row to the section using the following column structure:

fullscreen global header

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

fullscreen global header

Spacing

Remove all default top and bottom padding next.

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

fullscreen global header

Add Text Module to Column

Add Content

The only module we need in this row is a Text Module. Add a menu symbol of your choice to the content box. In this tutorial, we’re using ‘≡’.

fullscreen global header

Text Settings

Move on to the module’s design tab and change the text settings as follows:

  • Text Font: Abril Fatface
  • Text Color: #000000
  • Text Size: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)
  • Text Line Height: 1em

fullscreen global header

Spacing

Modify the spacing values across different screen sizes next.

  • Top Padding: 2vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
  • Bottom Padding: 2vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
  • Left Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)
  • Right Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)

fullscreen global header

CSS ID

This text module will serve as a trigger for the fullscreen menu. That’s why we’ll need to assign a CSS ID to the text module. Later on the tutorial, we’ll use the CSS ID in our code.

  • CSS ID: menu-open

fullscreen global header

Add Row #2

Column Structure

Continue by adding a second row to the section using the following column structure:

fullscreen global header

Sizing

Open the row settings and change the sizing settings as follows:

  • Width: 100%
  • Max Width: 100%

fullscreen global header

Spacing

Modify the spacing values too.

  • Top Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
  • Bottom Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
  • Left Padding: 19vw
  • Right Padding: 19vw

fullscreen global header

Add Text Module to Column

Add Content

Then, add a new Text Module to the column. This Text Module represents your first menu item.

fullscreen global header

Add Link

Make sure you add a proper link to the module next.

  • Module Link URL: #

fullscreen global header

Text Settings

Move on to the module’s design tab and change the text settings accordingly:

  • Text Font: Poppins
  • Text Font Weight: Semi Bold
  • Text Color: #000000
  • Text Size: 3vw (Desktop), 7vw (Tablet), 8vw (Phone)
  • Text Letter Spacing: -0.1vw
  • Text Line Height: 1em

fullscreen global header

Spacing

Modify the module’s spacing settings next.

  • Top Margin: 1vw
  • Bottom Padding: 2vw
  • Left Padding: 3vw

fullscreen global header

Border

Add a bottom border too.

  • Bottom Border Width: 1px
  • Bottom Border Color: #333333

fullscreen global header

CSS Class

And complete the module’s settings by adding a custom CSS class. You’ll need to add this CSS class to each and every menu item you place in your section.

fullscreen global header

Clone Text Module Three Times

Once you’ve completed the first Text Module, you can clone it as many times as you want (depending on the menu items you want to show in your menu). However, make sure the modules don’t surpass the height of your screen.

fullscreen global header

Change Content & Link of Each Duplicate

You’ll have to change the content and link of each duplicate.

fullscreen global header

Add Social Media Follow Module

Add Social Networks of Choice

The next and last module we need in this row is a Social Media Follow Module. Add all the social networks you want to display.

fullscreen global header

Reset Individual Social Network Styles

Continue by resetting the styles of each social network individually.

fullscreen global header

Icon Settings

Then, go to the module’s design tab and modify the icon settings as follows:

  • Icon Color: #000000
  • Use Custom Icon Size: Yes
  • Icon Font Size: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)

fullscreen global header

Spacing

Add some left padding too.

  • Left Padding: 3vw

fullscreen global header

CSS Class

Complete the module’s settings by adding a CSS class.

fullscreen global header

Add Row #3

Column Structure

The last row we need in this section contains the following column structure:

fullscreen global header

Spacing

Limit the space that is taken up by this row by removing all default top and bottom padding.

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

fullscreen global header

Add Code Module to Column

Insert JQuery & CSS Code

Then, add a Code Module and insert some CSS and JQuery code to make the fullscreen menu function. Make sure you manually place the JQuery code between script tags and the CSS code between style tags as you can notice in the print screen below.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});
.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

fullscreen global header

Section Settings

Background Color

On to the next section! This section will contain the logo in the top right corner. Open the section settings and change the background color into a completely transparent one.

  • Background Color: rgba(0,0,0,0)

fullscreen global header

Spacing

Remove the section’s default top and bottom padding next.

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

fullscreen global header

Default Visibility

Increase the section’s z index too.

  • Z Index: 99999

fullscreen global header

Hover Visibility

Enable the hover option on the z index and make sure that same value applies on hover as well.

  • Z Index: 99999

fullscreen global header

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

fullscreen global header

Sizing

Open the row settings and change the sizing settings as follows:

  • Width: 100%
  • Max Width: 100%

fullscreen global header

Spacing

Remove the row’s default top and bottom padding too.

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

fullscreen global header

Add Image Module to Column

Upload PNG Logo Image

The only module we need in this row and section is an Image Module. Upload your semi-transparent logo image file.

fullscreen global header

Sizing

Go to the module’s sizing settings and force fullwidth.

  • Force Fullwidth: Yes

fullscreen global header

Spacing

Complete the module’s settings by adding some custom padding across different screen sizes.

  • Top Padding: 2.5vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
  • Bottom Padding: 2.5vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
  • Left Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)
  • Right Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)

fullscreen global header

4. Additional Section Settings

Section #1

Sizing

Once you’ve completed both sections and all modules in it, it’s time to change their sizing. Open the first section and apply the following width and height values:

  • Width: 8vw (Desktop), 11vw (Tablet), 18vw (Phone)
  • Height: 7vw (Desktop), 11vw (Tablet), 18vw (Phone)

fullscreen global header

Default Main Element

Then, go to the section’s advanced tab and add the following lines of CSS code:

position: fixed;
top: 0;

fullscreen global header

Hover Main Element

Make sure those same CSS code lines apply on hover.

position: fixed;
top: 0;

fullscreen global header

Section #2

Sizing

Continue by opening the second section’s settings and change the width across different screen sizes.

  • Width: 13vw (Desktop), 21vw (Tablet), 30vw (Phone)

fullscreen global header

Default Main Element

Then, go to the advanced tab and add the following lines of CSS code:

position: fixed;
right: 0;
top: 0;

fullscreen global header

Hover Main Element

Make sure those same CSS code lines apply on hover.

position: fixed;
right: 0;
top: 0;

fullscreen global header

5. Save Builder Changes & View Result

Once you’ve completed all the steps above, you can save the global header template and view the result on your website!

fullscreen global header

fullscreen global header

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

fullscreen global header

Mobile

fullscreen global header

Final Thoughts

In this tutorial, we’ve shown you how to create a fullscreen global header using Divi’s Theme Builder. We’ve added two fixed elements to our design; a hamburger icon in the top left corner and a logo in the top right corner. On click, the hamburger icon opens a fullscreen menu that is made using Divi’s built-in elements. You’re free to use Divi to design this fullscreen menu however you want! At the beginning of this tutorial, you were able to download the JSON file for free as well. If you have any questions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

30 Comments

  1. @Donjete Vuniqi, I noticed that the cart and search icons are missing, which I use with WooCommerce. I’m still trying to resolve this issue with support. I also think it would be great to add a close icon for the menu.

  2. Hey, this isn’t working, neither the exported template neither following the tutorial. Could be because of dependencies of jQuery? It’s open the whole time.

  3. this was really cool and works the only thing is in the actual theme builder everything is still piled up on the left side, why is that?

    • That is unfortunate. I recommend contacting the Support Team. They will undoubtedly assist you with this.

  4. I would of thought changing the #FFFFF in the code to a different color would enable you to make the menu background a different color….buut it does not. Any clue on how to change the default White to another color background when you press the hamburger?

  5. Does anyone know how to swap the menu icon for a ‘X’ icon to close the menu?

  6. Hello, due to my logo color, i changed the background color to white. However, about 50% of the header background is still transparent. How to rectify?

  7. Thanks so much, this is very cool! I’ve noticed that when the page is first loaded, the full screen menu will flash momentarily, before it is hidden. Any ideas on how to make sure the ‘expanded’ menu stays hidden on page load?

  8. Hi, Nice tutorial, however, I have a small issue.

    When on a smartphone the navigation scroll work fine but will not allow me to scroll when in landscape orientation.

    Do you have any suggestions?

  9. Hi! Great tutorial, almost exactly what I was looking for. I have one question: how can I make section#1 ‘s background to go from transparent to white when I activate the menu? I tried to set the background to transparent, but somehow it seems to prevent the whole section to turn white upon clicking on the hamburger…
    Thanks!

  10. Quite the tutorial. Not bad. I might come back to this.

  11. Downloaded divi-landing-page-kit (5,17 MB) not global header 🙂

  12. Are all these SEO friendly?
    Is there any HTML markup that is actually a header, or to all search engines out there now Divi websites look like one pager?

  13. How did you put in an icon into the content box? Did you make your own icon ?

  14. Great example! Just one thing, when importing the layout into the Theme Builder the script and style tags were not added to the code module and had to be added manually.

  15. That’s fantastic but there’s a way to adopt it just for a specific section of my website? I cannot use this json file for it.
    Ty in advance
    Kind regards

  16. Hello developer,
    Do you have any sale off plan for the next Black Friday event?

    • Yes we will have our biggest sale of the year on Black Friday 🙂

  17. Nice work!
    Thanks you.

  18. Hello, could someone explain to me how I can leave my Top Menu fixed, so it doesn’t disappear when I scroll through the website

  19. Hello, cool tutorial, thanks!
    I have a one-pager site so the menu isn’t closing when clicking a section link.
    How do i make the full-screen menu close when clicking a menu item?
    Thanks.

  20. Very cool tutorial, thanks for that!
    Question though: in case my site is a one-page scroller, how do I make the function close the full-screen menu when clicking on a menu item? For now, it scrolls to any section but the full screen menu keeps covering the page.
    Thank you.

    • Hi Hess, that’s a good point, I initially created the tutorial to work on a multi-page website but I’ve updated the post and JSON file to make sure the menu works on one-pagers as well! 🙂

      Things I’ve changed in case you’re curious:
      – added a CSS class to the menu items (text modules & social media follow module)
      – updated the JQuery code

      • Can you tell me what to change back? Right now the menu is closed instantly and if the page isn’t loaded within a milisecond, it seams like the menu is just closing without working? Please can I have the original code/the paragraph that need to be changed?

  21. Hi,

    it doesn`t work. I see the 3 lines, but nothing happens when I click on them…

    • You have to manually add your links to the menu item modules.

    • The same situation. It doesn`t work.

  22. Nice tutorial. What I need is a header/menubar like in http://www.remmerden.nl
    Logo; some socmed icons; some menu items; hamburger slide in menu.
    Can that be created with Divi? (I have to redesign that website)

    • This looks way better than the tutorial, did you get any chance to replicate this header?

    • Maybe you could add and style a Menu Module to the first row and move the social icons to the first row as well. Easier said than done, but you could give it a try.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today