How to Turn Off Social Icons in Divi’s Secondary Bar

Written by Faizan

Full Stack Developer

Learn how to disable social icons in Divi's secondary bar with step-by-step instructions. Discover customisation tips using CSS or plugins.

The Divi theme is a popular choice among WordPress users due to its visual builder and user-friendly interface, enabling users to create stunning websites without any coding expertise. However, when building a website using Divi, you might find certain default features, such as social icons in the secondary bar, unnecessary or unsuitable for your design. This blog provides a detailed guide to turning off those social icons, covering various methods to help you customise your site effectively.

Why Turn Off Social Icons in the Secondary Bar?

The secondary bar in Divi, located above the main header, often contains social icons, a phone number, or an email address. While these elements might benefit certain websites, not every site wants or needs them. Here are a few reasons why you might want to disable the social media icons in the secondary bar:

• To simplify your website’s design and reduce visual clutter.
• To align with branding that doesn't focus on social media.
• To avoid distractions that steer visitors away from your main call-to-action or content.

Now, let's explore the different methods available to remove these icons. Learn more about

Step-by-Step Guide to Turning Off Social Icons in Divi

1. Using the Divi Theme Customizer

The simplest way to disable social icons in the secondary bar is by using the Divi Theme Customizer. Follow these steps:

Access the Customizer:

• Navigate to your WordPress Dashboard.
• Go to Appearance > Customize.

Locate the Header & Navigation Settings:

• Click on Header & Navigation, then choose Header Elements.

Disable Social Icons:

• There, you’ll find an option to toggle off the Show Social Icons setting. Disable it to remove the social icons from your secondary bar.

This method works perfectly for users looking for a quick and straightforward solution without needing coding or plugins.

2. Using CSS to Hide Social Icons in Divi

For those who prefer customisation at a deeper level, adding CSS is a powerful way to hide the social icons. Here's a step-by-step guide for this method:

Access the CSS Customisation Option:

• From your WordPress Dashboard, go to Divi > Theme Options.
• Scroll down to the Custom CSS section.

Add Custom CSS Code:

• Paste the following code into the CSS box to hide the social icons in the secondary bar:

#top-header .et-social-icons {

display: none;

}

• • Alternatively, if you want to hide the entire secondary bar (including phone and email), you can use this:

#top-header {

display: none;

}

Save Your Changes:

• Once you’ve added the CSS, click Save Changes. These updates will be reflected instantly on your website.

Tip: To prevent the social icons from flashing briefly before disappearing while your site loads, add the code to the Divi > Theme Options > Integration section in the Add code to the head box.

3. Using the Divi Toolbox Plugin for Advanced Customisation

If you require more flexibility in designing your website and want additional customisation options, the Divi Toolbox plugin can simplify the process. Here’s how you can use it:

Install the Divi Toolbox Plugin:

• Download and install the Divi Toolbox plugin.

Navigate to Social Icons Settings:

• After activating the plugin, go to Divi Toolbox > Header > Header Social Icons.

Remove Icons from the Secondary Bar:

• Toggle the option to Move icons to the primary menu or disable the icons entirely.

Customise Further:

• Divi Toolbox also allows you to adjust social icon colour, size, hover effects, and positioning. Explore these settings for advanced personalisation.

Using Divi Toolbox makes the process even more dynamic, especially for users who are not experienced with CSS or want a more feature-rich approach.

How They Fit

When customising Divi, understanding related terms can enhance your knowledge. Here are several relevant keywords to consider:

• Divi Secondary Menu Bar

The secondary menu bar is the thin strip above the main navigation bar where social icons, email, and phone details are often displayed.

• Hide Social Icons Divi

A popular user query, this focuses on removing social icons specifically while keeping other elements of the secondary bar intact.

• Divi Theme Customisation

This refers to using Divi’s built-in settings to make adjustments without needing advanced skills.

• Divi CSS Tips

CSS tips guide users on how to modify their site design precisely, as seen in the methods described above. Adding a few lines of CSS is often the quickest way to solve a problem.

Using these phrases as part of your research and in your modifications ensures that you address user needs and optimise the functionality of Divi.

External Resources for Further Customisation

For more information and tools, these resources might be helpful:

• Divi Documentation: Explore official guides for various configurations.
• Divi Toolbox Plugin: A premium plugin designed to expand the customisation options for Divi.
• Divi Booster Plugin: Another plugin with hundreds of features to simplify Divi customisation.

Adding these links provides users with direct access to additional tools and insights.

Conclusion

Removing social icons from the secondary bar in Divi is a straightforward task with multiple solutions to fit any user’s technical skill level. You can use the built-in Theme Customizer for quick adjustments, add CSS for more control, or leverage plugins like Divi Toolbox for advanced customisation options. Each method has its own benefits depending on the level of control and complexity you require.

Taking time to fine-tune details like social icons ensures that your website represents your brand’s unique style and vision. For more tips, explore the power of Divi to create truly customised and professional websites.

FAQs for How to turn off social icons in secondary bar divi​

1. What is the secondary bar in Divi?

The secondary bar in Divi is a thin section located above the main menu that typically displays social media icons, a phone number, or an email address. It's part of the header and can be customised or hidden depending on your website's needs.

2. How do I disable social icons in the secondary bar using the Divi Theme Customizer?

To disable social icons via the Divi Theme Customizer, follow these steps:

Navigate to Appearance > Customize in your WordPress dashboard.

Open Header & Navigation > Header Elements.

Toggle off the Show Social Icons option.

Once saved, the social icons will be removed from the secondary bar.

3. Can I hide the entire secondary bar in Divi?

Yes, you can hide the entire secondary bar. To do so, you can clear any active elements (like social icons, email, or phone number) in the Theme Customizer. Alternatively, use the following CSS code to remove the bar altogether:

#top-header {

display: none;

}

Add this code to the Custom CSS box in Divi > Theme Options.

4. What CSS code can I use to remove social icons in Divi?

To specifically remove social icons from the secondary bar, use the following snippet:

#top-header .et-social-icons {

display: none;

}

Paste it into the Custom CSS section under Divi > Theme Options.

5. Are there plugins available to customize the secondary bar in Divi?

Yes, there are plugins designed to extend Divi’s customisation options. Two popular choices are:

• Divi Toolbox – Offers detailed settings for managing social icons and header elements.
• Divi Booster – A plugin that simplifies various customisations, including the secondary bar.

Both plugins cater to users seeking advanced design flexibility without coding.

6. Will removing social icons affect my website’s performance?

No, removing social icons will not negatively impact your website’s performance. It could even improve it slightly by reducing the number of elements the site needs to load. This can lead to faster load times and a cleaner user experience.

If you have more questions about Divi or customisation tips, check out the Divi documentation for additional support!