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’s 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

desktop version

Mobile

mobile version

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.

Divi Social Icons JSON

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.

social icons portability

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).

theme builder

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

header

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).

row column structure

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.

row settings

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.

column settings

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.

css to the column

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

mobile width

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.

social media follow module

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.

alignment

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

icon color

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.

top margin

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.

social settings

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.

background icon

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.

icon color

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.

icon border

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.

copy item styles

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

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.

save your work

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

desktop version

Mobile

mobile version

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?

The post How to Add Social Icons to Divi’s Primary Menu appeared first on Elegant Themes Blog.

Go to source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.