How to Turn Off Social Icons in Secondary Bar Divi: A Step-by-Step Guide

The Divi theme by Elegant Themes offers users a flexible and user-friendly design experience. However, when working with Divi’s header options, you may encounter unnecessary visual elements like social media icons appearing in the secondary menu. This often leads to an unwanted top bar displaying above your primary navigation.

If you’re wondering how to turn off social icons in secondary bar Divi, you’re not alone. Many site owners look for a clean and minimal header design without extra clutter. In this detailed guide, we’ll walk you through different methods to hide or remove those social icons effectively, offering you more control over your site’s appearance.

Understanding the Divi Header Structure

Divi divides its default header into two sections:

• Primary Menu Bar: Contains your main navigation links.
• Secondary Menu Bar: Often used for contact info, additional links, and social icons.

When social icons are enabled in the secondary bar, it becomes visible by default. This design choice may not suit every website, particularly if you’re aiming for a minimal or custom look.

Why You Might Want to Remove Social Icons

Here are some common reasons users choose to remove social icons from the secondary menu:

• To create a minimalist header design
• To avoid redundant social media links (already included in the footer or elsewhere)
• To increase website speed and reduce header clutter
• To design a custom header layout without Divi’s default elements

Methods: How to Turn Off Social Icons in Secondary Bar Divi

There are multiple ways to achieve this, depending on your Divi setup and preferences. Below are step-by-step methods for both beginners and developers.

Method 1: Disable via Theme Options

This is the most straightforward approach and requires no coding knowledge.

Steps:

1. Login to your WordPress Dashboard.
2. Navigate to Divi > Theme Options.
3. Click on the “Header & Navigation” tab.
4. Select Header Elements.
5. Toggle OFF the options for:
   • Show Facebook Icon
   • Show Twitter Icon
   • Show Instagram Icon
   • Show RSS Icon
6. Save your changes.

Outcome: The secondary bar will no longer display social icons, and in many cases, it will disappear entirely if no other content is present.

Method 2: Remove via Divi Pixel Plugin (If Installed)

If you’re using the Divi Pixel plugin for advanced customization, there’s a built-in setting.

Steps:

1. Go to Divi > Divi Pixel > Social Icons.
2. Uncheck all social media platforms listed.
3. Save changes and refresh your site.

This plugin-based approach is helpful for those managing multiple settings and layout adjustments at once.

Method 3: Customize with Header Builder (Theme Builder)

Using Divi’s Theme Builder gives you full control over header layout and visibility of individual components.

Steps:

1. Go to Divi > Theme Builder.
2. Select or create a new Global Header.
3. Use the Divi Builder to add only the elements you need (e.g., logo, menu).
4. Avoid inserting the Social Media Follow module in the secondary section.
5. Save and publish the new header.

This allows you to design a fully custom header where social icons are excluded by default.

Method 4: Use Custom CSS (Advanced)

For users comfortable with CSS, a quick fix can be done by hiding the social icons via CSS.

Steps:

1. Go to Divi > Theme Options > Custom CSS (or Appearance > Customize > Additional CSS).
2. Paste the following CSS code:

css

CopyEdit

#et-info {

    display: none;

}

3. Save changes and refresh the site.

Note: This will hide the entire secondary bar content, including phone number or email if you have them added.

Table: Comparison of Methods to Disable Social Icons in Divi

Method	Skill Level	Removes Only Icons	Removes Full Bar	Customization Level	Plugin Needed
Theme Options	Beginner	Yes	Sometimes	Low	No
Divi Pixel Plugin	Beginner	Yes	Yes	Medium	Yes
Theme Builder (Custom Header)	Intermediate	Yes	Yes	High	No
Custom CSS	Advanced	Yes	Yes	Low-Medium	No

Troubleshooting: What If the Bar Still Appears?

Sometimes, even after disabling social icons, the top bar may still be visible. Here’s what to check:

• Empty space from phone/email: Go to Divi > Theme Customizer > Header & Navigation > Header Elements. If contact info is entered here, remove it.
• Cache issues: Clear your browser and site cache (especially if using a caching plugin).
• Child theme overrides: If using a custom child theme, check your header.php or style files for hardcoded elements.

Pro Tips for a Cleaner Header Design

• Use Theme Builder instead of default header settings for full flexibility.
• Test your changes on mobile view—Divi offers responsive settings in the builder.
• Use a child theme if applying CSS or code edits to avoid overwriting during updates.
• Backup before major changes using a plugin like UpdraftPlus or WPVivid.

Additional Customization Ideas

Once you’ve removed the social icons, you may want to take your header customization further:

• Add a sticky menu using Divi’s built-in options.
• Create a transparent header for a modern look.
• Include a custom CTA button in the top-right corner.
• Insert a language switcher or a small contact form.

These enhancements keep your site functional and engaging without cluttering the visual space.

Conclusion

If you’re aiming for a streamlined, distraction-free website layout, knowing how to turn off social icons in secondary bar Divi is an essential skill. Whether you’re using the native settings, Divi Pixel plugin, or opting for a fully custom header, the process is user-friendly and reversible.

By decluttering the top bar and focusing on essential elements, you not only improve aesthetics but also enhance the user experience. Take the time to explore Divi’s design flexibility—it’s one of the many reasons it’s trusted by thousands of WordPress users worldwide.

Frequently Asked Questions (FAQ)

Can I keep the phone number in the secondary bar but remove social icons?
Yes. Simply turn off the social icons in Theme Options and leave the contact info filled in.

Will removing social icons affect SEO or social sharing?
No. Removing visible icons has no direct SEO impact. Use separate social sharing plugins or footer widgets instead.

Is it possible to show social icons only on mobile or desktop?
With Theme Builder and responsive settings, you can control visibility based on device types.

What if my custom CSS doesn’t work?
Ensure there’s no cache interfering and that the selector #et-info hasn’t been changed by a child theme or plugin.

Do I need to hire a developer for this?
Not necessarily. Most users can disable social icons through the Theme Options or Theme Builder without code.