The way you design your header sets the tone for the rest of your website. That’s why it’s important to think of the way you add elements and interactions. Of course, you’ll want to include the basics like a logo and menu items, but chances are high you’ll want to include some other calls to action as well. However, the more items you add to your header, the more overwhelming the header can become. If you’re looking for a clean and interactive way to showcase different calls to action in your header, you’ll love this tutorial. Today, we’re showing you how to save space in your header using toggle icons. You’ll be able to download the JSON file for free as well!
Let’s get to it.
Download The Global Header Template for FREE
To lay your hands on the free 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 Divi Daily email list 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.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Build Header Structure
Create New Global Header Template
Start by going to the Divi Theme Builder and start building a new global or custom header.
Once inside the template editor, you’ll notice a section. Open that section’s settings and apply a gradient background.
Move on to the section’s design tab and remove all default top and bottom padding.
Add a box shadow as well.
Continue by adding a new row using the following column structure:
Remove all default top and bottom padding next.
Main Element CSS
Then, go to the advanced tab and apply some main element custom CSS code lines across different screen sizes. This code will help us vertically center the items on desktop.
Desktop:
Tablet & Phone:
Then, open the column 1 settings and apply some left and right padding.
Main Element
We’re changing the size of our column on desktop and bringing it back to “100%” on tablet and phone by applying some custom CSS to the column’s main element.
Desktop:
Tablet & Phone:
Next, we’ll open the column 2 settings and change the background color to white.
We’ll add some responsive padding values to the spacing settings of this column too.
Main Element CSS
We’ll modify the second column’s size on desktop too. We’re bringing this back to “100%” on smaller screen sizes.
Desktop:
Tablet & Phone:
Add Menu Module to Column 1
Select Menu
Time to add modules, starting with a Menu Module in column 1. Select a menu of your choice.
Upload Logo
Remove Background Color
Then, remove the default background color.
Menu Text Settings
Move on to the module’s design tab and change the menu text settings accordingly:
Dropdown Menu Settings
Then, change the dropdown menu line color.
Icons Settings
Change the icon colors in the icons settings too.
And complete the module settings by changing the sizing settings as follows:
Add Blurb Module #1 to Column 2
Leave Content Box Empty
On to the second column. To create the toggle icons, we’ll use Blurb Modules without the title and content. We’ll start by creating the first toggle icon and then reuse the module to add the other two toggle icons. Once you’ve added the Blurb Module, make sure the title and content box are empty.
Select Icon
Next, select an icon of your choice.
Icon Settings
Move on to the module’s design tab and change the icon settings as follows:
Modify the sizing settings too.
Main Element & Blurb Image CSS
And complete the module settings by adding two CSS code lines to the custom CSS options in the Blurb Module’s advanced tab.
Main Element:
Blurb Image:
Clone Blurb Module Twice
Once you’ve completed the first toggle icon Blurb Module, you can clone it twice.
Change Icon
Make sure you change the icon in each duplicate.
2. Add Toggle Items
Move on to the section’s design tab and remove all default top and bottom padding.
Continue by adding a new row using the following column structure:
And reposition the entire row. Turning this row absolute will help us prevent the row from taking up any space in the design.
Add Text Module #1 to Column 2
Add Phone Number to Content Box
Time to add the toggle items! First, we’ll add the phone number. Add a new Text Module to column 2 and insert the phone number in the content box.
Background Color
Add a black background color next.
Text Settings
Move on to the module’s design tab and change the text settings accordingly:
Then, add some custom padding values to the spacing settings.
Clone Text Module
Once you’ve completed the first toggle item Text Module, clone it once.
Change Content to Email Address
Change the content in the content box.
Add Social Media Follow Module to Column 2
Add Social Networks of Choice
Then, add a Social Media Follow Module to column 2. Add as many social networks as you want.
Change Each Social Network’s Background Color to White
Then, change the background color to white for each social network individually.
Background Color
Then, come back to the general module settings and use a black background color.
Move on to the module’s design tab and change the module alignment.
Change the icon color in the icons settings too.
And complete the module settings by adding some rounded corners to the border settings.
3. Add Functionality
Add Consecutive CSS IDs to Blurb Modules First Section
Now that all the elements are in place, we can start adding the toggle effect. The first thing you’ll need to do is open each Blurb Module individually and add a consecutive CSS ID.
Add Consecutive CSS IDs to Toggle Items
Do the same thing for the toggle item modules. The number at the end of the CSS ID should match the CSS ID you used for the icons in the previous step.
Add Absolute Position to All Toggle Items
And turn each one of the toggle items absolute one by one. We recommend you go to wireframe mode to do this.
Add Code Module to First Column of Section #1
Now that all CSS IDs are in place, we can add the code to make the click function work. Add a new Code Module right below the Menu Module in column 1.
Insert CSS Code
Add the following lines of CSS code between style tags as you can notice in the print screen below:
Insert JQuery Code
We’re adding some custom JQuery code too. Add the code between script tags as you can notice in the print screen below.
4. Make Header + Toggle Items Sticky
Make Section #1 Sticky
Last but not least, you can also turn the header and toggle items sticky. To create the desired outcome, you’ll need to make sure both sections are sticky and the “Offset From Surrounding Sticky Elements” option is enabled. Make the first section sticky.
Make Section #2 Sticky
And do the same for section 2. That’s it!
In this post, we’ve shown you how to use toggle icons inside your header. As soon as someone clicks on an icon, a toggle item appears, which helps you save a lot of space in your header design. This approach focuses on user behavior and helps you prevent having to design an overwhelming header design. 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.
This content was originally published here.