How to Add Social Icons to Divi’s Primary Menu

It is virtually impossible to run a successful website without having a dedicated social media presence. Whether you choose that to be Instagram, Twitter, TikTok, Facebook, or any combination of those and anything else, people want to interact with you and your brand directly. Making sure that you have social icons in Divi and its primary menu is a great way to funnel traffic from your website to the network of your choice. It’s fast and easy, and we’re going to walk you through every step.

Let’s get started!

Preview

Desktop

Mobile

Use the Divi Theme Builder to Upload a Global Header Freebie

For this article, we’re going to be using the Tennis Club layout pack and header/footer freebie. You can download the layout pack from within your Divi builder, and the header/footer pack from our blog. When you download it, the files will be as a .zip archive. Make sure that you extract them so that you have a .json file to upload into Divi.

Now, go into your WordPress dashboard and find the Divi Theme Builder under Divi – Theme Builder. Click on the up-and-down arrow icon in the upper-right corner of the page. This opens the Portability modal, select the Import tab, find the .json file for the header/footer you downloaded, and click Import Divi Theme Builder Templates.

You then want to go into the header section of your site. Because it’s social icons, we’re going to be putting them in the Global Header because we figure they should be on all pages on  your site (unless specified otherwise).

You should be inside the builder now. If you followed the directions above, the new header you uploaded should appear already in place.

You may notice there are already are social icons here. Those social icons aren’t in the Divi Primary Menu which is what we’re working toward today, however. So let’s get into the weeds of it, shall we?

Add Social Icons to the Primary Menu Bar

First thing’s first, let’s change the row/column structure. We want to find the row in section #2 (the bottom one with the Home/Contact links).

We’re selecting the two-column structure for this tutorial, but it’s whatever works best for your site. Once you’ve chosen that, go into the Row settings and navigate to the Design tab. Find the Sizing menu, and toggle Use Custom Gutter Width on. Set the Gutter Width value to 1. You can enter the number or use the slider to do this.

Click the green checkmark to save your settings. Then go back into the Row settings. This time, select the settings gear for the top/first/left column.

Next, navigate to the Advanced tab. Find the Custom CSS area and click into the Main Element field. Inside this field, you will want to add the following CSS.

width:80%;

or

width:80%!important;

You might have to add the !important tag to style this element. That’s okay. It shouldn’t create performance issues or spaghetti code to deal with because it’s a single element.

Then, go into the Responsiveness settings and use the same code to change the width for the column back to 100% for mobile devices.

Next, repeat this step for the second column. Only this time, set the default value at 20% and still have the mobile value at 100%.

With that done, save your changes and get ready to add and style your social media icons.

Add Social Media Follow Module

Click the black + icon in Column 2 to add a new module and scroll until you find Social Media Follow. Insert it.

Regardless of the header that you are using, the default social media icons will most likely not match your style. Nor will they positioned correctly. The next step will be to style and space them correctly. Inside the Social Media Follow module settings, go to Design and then Alignment. Choose to where you want the module placed.

We are choosing right-justified for desktop and then going into the Responsiveness options and centering it.

Next up is scrolling down into the Icon menu. Choose the color of the icon you want. This is the f for Facebook, the bird for Twitter, the camera for Instagram. This is not the blue background, for instance.

Next up is spacing. Really the main thing that needs adjusted is the top margin. We’re going to apply a 1.5vw top margin so that it centers with the menu text. If you want it more or less for mobile, you can adjust that, too.

Now, click on the Content tab and go into the individual social network icon you want to customize. You will repeat these steps for each icon you choose for your site.

Scroll down to Background and select the color you want that matches your site’s design. Again, remember this will only change this particular icon’s background.

You might also want to change this particular icon’s color. You can do so under the Design tab and Icon section, just like in the overall module itself. This setting will override the general one, so you don’t have to worry about interfering with others if you want one-off colors.

Then, scroll down to the Border entry under the Design tab and within it, you will find the Border Width. Set this value to 3px, and then select a Border Color that stands out from the Divi Primary Menu’s background.

At this point, you will go back to the Content tab and repeat these steps for each social network icon you wish to display. If you want each of the icons in this module to share the same design, you can simply right-click the one you designed and select Copy Item Styles.

Next, right-click the other networks you wish to style and select Paste Item Styles.

And that’s it!  Be sure to click the Save button in the lower-right corner of the screen to save the overall layout. Then, you’re safe to X out of the edit screen in the upper-right corner.

Make sure that the Divi Theme Builder page shows All Changes Saved in the upper-left. If not, click Save Changes. Once done, your site will be live displaying the social media icons in your Divi Primary Menu!

Final Results

And this is what your final results should resemble.

Desktop

Mobile

Wrapping Up

Making sure that your audience can always find your primary social networks is a piece of cake with Divi. In just a few steps, you can adjust one of our freebie header/footer packs to include your social media icons into the primary menu (or wherever else you may want them). Good luck!

What do you think about social media icons in the primary menu? Where do you tend to place them?