Creating a Divi MadMenu Header. Part 4: Slide-In Social Icons
In this tutorial we are going to add the Slide-In Social Icons section to the header (the Divi MadMenu header template #13) which will be sliding in from left when the user clicks the social networks button on the left side of the header.
As you can see on the screenshot, there are two additional buttons on the left side of the main header bar: the social networks button and the search button.
In this tutorial we’ll add the social networks button with the social icons section and in the Part 5 (the final part) we’ll add the search to the header as well.
This is the Part 4 of the tutorials series about how to create a header using Divi MadMenu extension.
However, you can also download the header template that we’ve done in Part 3, import it into the Theme Builder and follow this tutorial from where we left in the previous part.
Adding the Social Icons Section
We’ll use a new section to add the social icons to the header.
It will work exactly the same way as we did with the user account menu in Part 3 except that the social icons will slide in from left.
But there is another important distinction between the user account menu and the social icons slide-in sections.
The user account menu is toggled by clicking the Account button which is located in a different section(the main menu bar and the user account menu are two different sections).
But the social icons section is toggled by clicking the social networks button which is part of the same section where we have the social icons.
This makes the social icons section completely independent from the main menu bar because it’s own toggle is inside the section itself.
So, let’s add the section, a Divi MadMenu module which will be it’s toggle, and the Social Media Follow module for adding the social icons.
- Add the social icons section.
- Add the toggle button (Divi MadMenu module).
- Add the social icons (Social Medial Follow module).
First, let’s set the sizing, spacing and background color of the social icons section:
- Set the section background color to #334257.
- Set the section width to 60px.
- Set the section height to 100vh.
- Remove section padding.
Next, let’s open the Divi MadMenu module settings and create the toggle.
We will use the Button One element for creating the toggle button, and disable all other elements.
The module background color needs to be transparent, and we need to move it out of the section boundaries to the right so that the button always remains in viewport even after the social icons section slides out to the left(the toggle button will be moving together with the social icons section).
So, let’s open the MadMenu module settings and apply the followings:
- Enable the Button One element.
- Make the module background color transparent.
- Set the module margin: 10px 0px 52px 0px. (the module is moved to right by 52px). For mobile margin-top should be 7px(for better vertical alignment of the toggle).
- Set the module padding: 5px 5px 0px 0px.
Let’s also set the toggle module width and max-width to 50px in Design -> Sizing (we will increase the width in Part 5 so that the search button fits in horizontally too):
Next, go to the Button One content settings in Content -> Button One, we need to add the button contents as well as configure the popup(the social icons section) settings:
- Leave the button text field empty, the toggle button will have icon only.
- Select the Image Icon option to upload a custom image icon for the toggle button.
- Add the custom image icon.
- Set the button type to Popup.
- Set the ID of the popup that this button will be toggling: socialIcons (the same ID should be assigned to the social icons section, we’ll do that later in this tutorial).
- The toggle type must be Primary.
- Select the Top Left location for the popup.
- Set the popup opening animation to Slide In Left.
- Set the popup closing animation to Slide Out Left.
- Make the popup (the social icons section) close on outside click.
- Set the popup z-index to 9 so that it overlaps the main menu bar.
If we click the toggle button now nothing happens because we haven’t assign the popup to this button yet.
To make the social icons section slide in/out when the toggle button is clicked we need to assign the same popup ID (socialIcons) to it in the Section Settings -> Advanced -> CSS ID & Classes -> CSS ID.
Now clicking the toggle button makes the section slide in/out as expected.
Let’s remove the padding-top of the row(which the toggle is located in) so that the toggle button moves up.
Now we need to style the toggle button and add the social icons into the social icons section.
Styling the Social Icons Toggle Button
Let’s go to the Button One design settings in Design -> Button One and apply the followings:
- Set the button margin: 0px 0px 10px 0px.
- Set the button background color to rgba(255, 255, 255, 0.15), and the hover background color to rgba(255, 255, 255, 0.25).
- Make the button circular by applying a 50px border radius.
- Set the icon width to 20px.
- Set the button border to 0px.
The toggle button is ready, now let’s add the social icons.
Adding the Social Icons
We’ll add one social network icon and style it, then duplicate it and add other social networks as well.
So, let’s open the settings of the Social Media Follow module that we’ve added earlier in this tutorial, add one social network and apply it’s settings:
- Open the child module settings.
- Set the social icon background color to rgba(255, 255, 255, 0.15), and for the hover state set it to rgba(255, 255, 255, 0.25).
- Set the icon size to 19px.
- Set bottom margin to 10px.
- Set social icon padding: 2px 2px 2px 2px.
Now duplicate this child module as many times as you need, select a different network for each and set the URLs accordingly.
Next let’s fix the alignment of the social icons. We need to add a negative margin-top in the in Social Media Follow Settings -> Spacing to move the module up where there is an empty space now(because we’ve moved the toggle button – the MadMenu module – to right).
And also let’s add some padding-left to the module to center the social icons horizontally.
Finally, let’s make the icons circular by applying a 50px border radius in Social Media Follow Settings -> Borders:
- Move the module up by applying a -45px margin-top.
- Add padding-left: 3px.
- Make the icons circular by setting the border radius to 50px.
In this tutorial we’ve added the social icons section to the header which slides in/out when the user clicks the social networks button on the left side of the main menu bar.
The social icons toggle button moves together with the social icons section when it slides in/out because the toggle is contained inside the same section.
In the next tutorial (Part 5, the last one of this tutorials series) we’ll add the search functionality to the header.