How to Save Space in Your Header Using Toggle Icons with Divi

Jan 5, 2021 | Everything Divi for WordPress

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.

Preview

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

Desktop

how-to-save-space-in-your-header-using-toggle-icons-with-divi-1 How to Save Space in Your Header Using Toggle Icons with Divi

Mobile

how-to-save-space-in-your-header-using-toggle-icons-with-divi-2 How to Save Space in Your Header Using Toggle Icons with Divi

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.

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.

how-to-save-space-in-your-header-using-toggle-icons-with-divi How to Save Space in Your Header Using Toggle Icons with Divi

how-to-save-space-in-your-header-using-toggle-icons-with-divi-1 How to Save Space in Your Header Using Toggle Icons with Divi

Add Section #1

Gradient Background

Once inside the template editor, you’ll notice a section. Open that section’s settings and apply a gradient background.

  • Color 1: #ffffff
  • Color 2: #eaeaea
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Position: 50%
  • End Position: 50%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-2 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

Move on to the section’s design tab and remove all default top and bottom padding.

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-3 How to Save Space in Your Header Using Toggle Icons with Divi

Box Shadow

Add a box shadow as well.

  • Shadow Color: rgba(0,0,0,0.06)

how-to-save-space-in-your-header-using-toggle-icons-with-divi-4 How to Save Space in Your Header Using Toggle Icons with Divi

Add New Row

Column Structure

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-5 How to Save Space in Your Header Using Toggle Icons with Divi

Sizing

Without adding any modules yet, open the row settings, move on to the design tab and change the sizing settings as follows:

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-6 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

Remove all default top and bottom padding next.

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-7 How to Save Space in Your Header Using Toggle Icons with Divi

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:

display: flex;
place-items: center;

Tablet & Phone:

display: block;

how-to-save-space-in-your-header-using-toggle-icons-with-divi-8 How to Save Space in Your Header Using Toggle Icons with Divi

Column 1 Settings

Spacing

Then, open the column 1 settings and apply some left and right padding.

  • Left Padding: 5%
  • Right Padding: 5%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-9 How to Save Space in Your Header Using Toggle Icons with Divi

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:

width: 88% !important

Tablet & Phone:

width: 100% !important;

how-to-save-space-in-your-header-using-toggle-icons-with-divi-10 How to Save Space in Your Header Using Toggle Icons with Divi

Column 2 Settings

Background Color

Next, we’ll open the column 2 settings and change the background color to white.

  • Background Color: #FFFFFF

how-to-save-space-in-your-header-using-toggle-icons-with-divi-11 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

We’ll add some responsive padding values to the spacing settings of this column too.

  • Top Padding:
    • Desktop: 50px
    • Tablet & Phone: 20px
  • Bottom Padding
    • Desktop: 50px
    • Tablet & Phone: 20px
  • Left Padding: 1%
  • Right Padding: 1%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-12 How to Save Space in Your Header Using Toggle Icons with Divi

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:

display: flex;
place-items: center;
width: 12% !important;

Tablet & Phone:

width: 100% !important;

how-to-save-space-in-your-header-using-toggle-icons-with-divi-13 How to Save Space in Your Header Using Toggle Icons with Divi

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.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-14 How to Save Space in Your Header Using Toggle Icons with Divi

Upload Logo

Upload a logo next.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-15 How to Save Space in Your Header Using Toggle Icons with Divi

Remove Background Color

Then, remove the default background color.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-16 How to Save Space in Your Header Using Toggle Icons with Divi

Menu Text Settings

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

  • Menu Font: Playfair Display
  • Menu Text Font: Playfair Display
  • Menu Text Color: #000000
  • Menu Text Size: 19px
  • Menu Line Height: 1.4em
  • Text Alignment: Right

how-to-save-space-in-your-header-using-toggle-icons-with-divi-17 How to Save Space in Your Header Using Toggle Icons with Divi

Dropdown Menu Settings

Then, change the dropdown menu line color.

  • Dropdown Menu Line Color: #ffffff

how-to-save-space-in-your-header-using-toggle-icons-with-divi-18 How to Save Space in Your Header Using Toggle Icons with Divi

Icons Settings

Change the icon colors in the icons settings too.

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-19 How to Save Space in Your Header Using Toggle Icons with Divi

Sizing

And complete the module settings by changing the sizing settings as follows:

  • Logo Max Width: 200px
  • Width: 100%
  • Module Alignment: Center

how-to-save-space-in-your-header-using-toggle-icons-with-divi-20 How to Save Space in Your Header Using Toggle Icons with Divi

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.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-21 How to Save Space in Your Header Using Toggle Icons with Divi

Select Icon

Next, select an icon of your choice.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-22 How to Save Space in Your Header Using Toggle Icons with Divi

Icon Settings

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

  • Icon Color
    • Default: #dbdbdb
    • Hover: #000000
  • Icon Placement: Top
  • Icon Alignment: Center
  • Use Icon Font Size: Yes
  • Icon Font Size: 200%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-23 How to Save Space in Your Header Using Toggle Icons with Divi

Sizing

Modify the sizing settings too.

  • Content Width: 100%
  • Width: 32%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-24 How to Save Space in Your Header Using Toggle Icons with Divi

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:

display: inline-block;

Blurb Image:

margin-bottom: 0px !important

how-to-save-space-in-your-header-using-toggle-icons-with-divi-25 How to Save Space in Your Header Using Toggle Icons with Divi

Clone Blurb Module Twice

Once you’ve completed the first toggle icon Blurb Module, you can clone it twice.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-26 How to Save Space in Your Header Using Toggle Icons with Divi

Change Icon

Make sure you change the icon in each duplicate.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-27 How to Save Space in Your Header Using Toggle Icons with Divi

2. Add Toggle Items

Add Section #2

Sizing

Now that we’ve set the foundation of our header, we still need to include the toggle items. To do that, we’ll add a new section right below the previous one. Open the section settings and make sure the height of this section is “0px”. This will help us prevent the section from taking up any space in our header design. The only reason we need this section is to show our toggle items.

  • Height: 0px

how-to-save-space-in-your-header-using-toggle-icons-with-divi-28 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

Move on to the section’s design tab and remove all default top and bottom padding.

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-29 How to Save Space in Your Header Using Toggle Icons with Divi

Add New Row

Column Structure

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-30 How to Save Space in Your Header Using Toggle Icons with Divi

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings as follows:

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-31 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

Remove all default top and bottom padding next.

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-32 How to Save Space in Your Header Using Toggle Icons with Divi

Position

And reposition the entire row. Turning this row absolute will help us prevent the row from taking up any space in the design.

  • Position: Absolute
  • Location: Top Right Corner

how-to-save-space-in-your-header-using-toggle-icons-with-divi-33 How to Save Space in Your Header Using Toggle Icons with Divi

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.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-34 How to Save Space in Your Header Using Toggle Icons with Divi

Background Color

Add a black background color next.

  • Background Color: #000000

how-to-save-space-in-your-header-using-toggle-icons-with-divi-35 How to Save Space in Your Header Using Toggle Icons with Divi

Text Settings

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

  • Text Font: Playfair Display
  • Text Color: #ffffff
  • Text Size: 27px
  • Text Alignment: Center

how-to-save-space-in-your-header-using-toggle-icons-with-divi-36 How to Save Space in Your Header Using Toggle Icons with Divi

Sizing

Make sure the width is 100% too.

  • Width: 100%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-37 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

Then, add some custom padding values to the spacing settings.

  • Top Padding: 10%
  • Bottom Padding: 10%
  • Left Padding: 2%
  • Right Padding: 2%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-38 How to Save Space in Your Header Using Toggle Icons with Divi

Clone Text Module

Once you’ve completed the first toggle item Text Module, clone it once.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-39 How to Save Space in Your Header Using Toggle Icons with Divi

Change Content to Email Address

Change the content in the content box.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-40 How to Save Space in Your Header Using Toggle Icons with Divi

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.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-41 How to Save Space in Your Header Using Toggle Icons with Divi

Change Each Social Network’s Background Color to White

Then, change the background color to white for each social network individually.

  • Background Color: #FFFFFF

how-to-save-space-in-your-header-using-toggle-icons-with-divi-42 How to Save Space in Your Header Using Toggle Icons with Divi

how-to-save-space-in-your-header-using-toggle-icons-with-divi-43 How to Save Space in Your Header Using Toggle Icons with Divi

Background Color

Then, come back to the general module settings and use a black background color.

  • Background Color: #000000

how-to-save-space-in-your-header-using-toggle-icons-with-divi-44 How to Save Space in Your Header Using Toggle Icons with Divi

Alignment

Move on to the module’s design tab and change the module alignment.

  • Module Alignment: Center

how-to-save-space-in-your-header-using-toggle-icons-with-divi-45 How to Save Space in Your Header Using Toggle Icons with Divi

Icon Settings

Change the icon color in the icons settings too.

  • Icon Color: #000000

how-to-save-space-in-your-header-using-toggle-icons-with-divi-46 How to Save Space in Your Header Using Toggle Icons with Divi

Sizing

Then, apply a “100%” width to the sizing settings.

  • Width: 100%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-47 How to Save Space in Your Header Using Toggle Icons with Divi

Spacing

Apply some custom top and bottom padding too.

  • Top Padding: 10%
  • Bottom Padding: 10%

how-to-save-space-in-your-header-using-toggle-icons-with-divi-48 How to Save Space in Your Header Using Toggle Icons with Divi

Border

And complete the module settings by adding some rounded corners to the border settings.

  • All Corners: 100px

how-to-save-space-in-your-header-using-toggle-icons-with-divi-49 How to Save Space in Your Header Using Toggle Icons with Divi

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.

  • Blurb 1: header-cta-1
  • Blurb 2: header-cta-2
  • Blurb 3: header-cta-3

how-to-save-space-in-your-header-using-toggle-icons-with-divi-50 How to Save Space in Your Header Using Toggle Icons with Divi

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.

  • Text Module 1: header-item-1
  • Text Module 2: header-item-2
  • Social Media Follow Module: header-item-3

how-to-save-space-in-your-header-using-toggle-icons-with-divi-51 How to Save Space in Your Header Using Toggle Icons with Divi

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.

  • Position: Absolute
  • Location: Top Right

how-to-save-space-in-your-header-using-toggle-icons-with-divi-52 How to Save Space in Your Header Using Toggle Icons with Divi

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.

how-to-save-space-in-your-header-using-toggle-icons-with-divi-53 How to Save Space in Your Header Using Toggle Icons with Divi

Insert CSS Code

Add the following lines of CSS code between style tags as you can notice in the print screen below:

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

how-to-save-space-in-your-header-using-toggle-icons-with-divi-54 How to Save Space in Your Header Using Toggle Icons with Divi

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.

jQuery(function($){
$(document).ready(function(){ $('[id*="header-cta"]').click(function() { var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector); $item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item'); var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon'); $icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon'); }); });
});

how-to-save-space-in-your-header-using-toggle-icons-with-divi-55 How to Save Space in Your Header Using Toggle Icons with Divi

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.

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-56 How to Save Space in Your Header Using Toggle Icons with Divi

Make Section #2 Sticky

And do the same for section 2. That’s it!

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

how-to-save-space-in-your-header-using-toggle-icons-with-divi-57 How to Save Space in Your Header Using Toggle Icons with Divi

Preview

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

Desktop

how-to-save-space-in-your-header-using-toggle-icons-with-divi-1 How to Save Space in Your Header Using Toggle Icons with Divi

Mobile

how-to-save-space-in-your-header-using-toggle-icons-with-divi-2 How to Save Space in Your Header Using Toggle Icons with Divi

Final Thoughts

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.


Source

WordPress Development

SEO NEWS

seo news

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.