Blog

You are currently viewing How to Turn Off Social Icons in Secondary Bar Divi

How to Turn Off Social Icons in Secondary Bar Divi

If you are using the Divi theme for WordPress, you might have noticed social media icons appearing in the secondary bar at the top of your site. While these icons are useful for connecting with your audience, many website owners prefer a clean and distraction-free header.

In this guide, we’ll show you how to turn off social icons in Divi’s secondary bar, step by step, with examples, actionable tips, and optional CSS for advanced users. By the end, even beginners will be able to remove these icons and have a professional-looking website.

how to turn off social icons in secondary bar divi​

What is the Secondary Bar in Divi?

The secondary bar is the thin bar above your main menu in Divi. It usually contains:

  • Social media icons
  • Contact information (phone, email)
  • Extra links (like login or signup)

For beginners, the secondary bar can sometimes clutter the header, especially if you already have a logo and primary menu. Removing unnecessary social icons can improve design clarity and user experience.

Why Remove Social Icons in the Secondary Bar?

Here’s why website owners might choose to remove them:

  1. Cleaner Header Design – Less clutter gives your site a modern and professional look.
  2. Better Focus on Navigation – Visitors can focus on your main menu and call-to-action buttons.
  3. Faster Load Time – Fewer icons can slightly improve page speed.
  4. Customization Freedom – Gives you more control over the appearance of your header.
  5. Beginner-Friendly Site Maintenance – Simplifies managing your site without unnecessary elements.

Example: Imagine your site has a logo, menu, and social icons. Removing the icons makes the header look cleaner and less crowded, which improves user experience.

Method 1: Turn Off Social Icons Using Divi Theme Customizer (Beginner-Friendly)

The Divi Theme Customizer is the easiest way to hide social icons. No coding required.

Step-by-Step Instructions:

  1. Go to your WordPress Dashboard → Divi → Theme Customizer.
  2. Navigate to Header & Navigation → Header Elements.
  3. Find the toggle labeled Show Social Icons.
  4. Switch it off.
  5. Click Publish to save changes.

Once done, your secondary bar will no longer show social icons.

Pro Tip: After turning off the icons, check your site on mobile and desktop to ensure the header looks balanced.

Method 2: Turn Off Social Icons Using Divi Theme Options

If you prefer using Divi Theme Options, follow these steps:

Step-by-Step Instructions:

  1. Go to Divi → Theme Options → General Settings.
  2. Scroll down to Show Social Icons in Header.
  3. Toggle it off for the secondary bar.
  4. Click Save Changes.

This method works perfectly for beginners and doesn’t require any coding.

Example: Some users prefer Theme Options because it’s easier to navigate and gives a preview of changes in real time.

Method 3: Using Custom CSS (Optional Advanced Method)

If the first two methods don’t remove the icons, you can use a small CSS snippet to hide them completely.

Step-by-Step Instructions:

  1. Go to Divi → Theme Options → Custom CSS.
  2. Add the following code:

#et-secondary-menu .et-social-icons {

    display: none !important;

}

  1. Save changes and refresh your website.

This method completely hides social icons from the secondary bar without affecting the main menu or footer icons.

Pro Tip: Backup your website before adding CSS. This ensures you can revert changes if something goes wrong.

Examples of When to Remove Social Icons

  1. Minimalist Blog: Your site focuses on content, not social media promotion.
  2. Corporate Website: Clean header helps users focus on services or contact buttons.
  3. Portfolio Website: A simple header ensures your portfolio items stand out.

Before vs After Example:

  • Before: Logo + Menu + Social Icons → Looks crowded
  • After: Logo + Menu only → Clean, professional, and easier to navigate

Tips to Maintain a Professional Header

  • Check Responsiveness: Always view your site on mobile and tablet.
  • Use Social Icons Wisely: Only display icons if actively managed.
  • Focus on Main Menu: Keep the logo and menu visible for navigation clarity.
  • Regularly Update Divi: Ensure changes don’t break with theme updates.

FAQs About Divi Secondary Bar Social Icons

Q1: Will this remove social icons from the footer?
 No, these methods only affect the secondary bar. Footer icons remain intact.

Q2: Can I enable the icons again later?
 Yes, simply reverse the toggle or remove the CSS code.

Q3: Do I need coding knowledge to hide social icons?
 No, the first two methods require zero coding. CSS is optional.

Q4: Will it affect my main menu or logo?
 No, your primary menu and logo remain unchanged.

Q5: Why might icons still appear after turning them off?
 Some Divi child themes or plugins may override settings. Using the CSS method usually solves this issue.

Conclusion

Removing social icons from the secondary bar in Divi is easy, beginner-friendly, and quick. Whether you use the Theme Customizer, Theme Options, or Custom CSS, you can achieve a cleaner, professional header that improves user experience and site design.

By following this guide, even beginners can confidently customize their Divi header without affecting other areas of the website.

Leave a Reply