Turning Off Social Icons In The Divi Secondary Bar: Complete Technical Guide

Disabling social icons from the Divi secondary top navigation bar requires adjusting native Theme Customizer controls, toggling global social options, or removing the module inside the Divi Theme Builder engine. Removing these visual elements eliminates unnecessary DOM nodes, eliminates visual clutter, and prevents font icon file dependencies from loading in the above-the-fold utility bar. Implementing this modification takes under five minutes and ensures a clean, conversion-focused top bar across desktop and mobile viewports.

Pre-Procedure Planning & Environment Checklist

Before altering your WordPress theme settings or applying stylesheet overrides, ensure your environment meets the necessary administrative and architectural criteria. Modifying utility headers can alter page layout heights and impact site caching, so reviewing these prerequisites avoids unexpected layout shifts or persistence bugs.

• Essential System Access & Tools:
  
  
  • WordPress Administrator account credentials with access to Divi Theme Options and Customizer panels.
  • Active Divi Theme version 4.0 or higher (or a child theme built on the Divi framework).
  • Access to server-side or plugin-level cache management controls (e.g., SG Optimizer, WP Rocket, Cloudflare, or Divi Built-in Static CSS Manager).
• Prerequisite Technical Knowledge:
  
  
  • Familiarity with the WordPress Theme Customizer visual interface.
  • Understanding of the difference between Divi Standard Headers and Divi Theme Builder Custom Header layouts.
  • Basic comprehension of CSS display rules and specificity principles.
• Project Benchmarks:
  
  
  • Estimated Execution Time: 3 to 5 minutes for native settings; 5 to 10 minutes for Theme Builder or CSS overrides.
  • Financial Cost: $0 (Utilizes core Divi functionality and standard WordPress options).

Step-by-Step Workflow to Disable Social Icons

Divi processes headers through two distinct structural engines: the legacy native header framework (controlled by the Theme Customizer and Theme Options) and the dynamic Theme Builder framework (controlled by layout templates). Follow the appropriate method below based on how your site header was constructed.

Method 1: Disabling Icons via the Native Divi Theme Customizer

If your site utilizes the built-in, standard Divi header system, the secondary top bar icons are managed directly inside the visual Theme Customizer controls.

1. Log into your WordPress Dashboard using an account with administrative permissions.
2. Navigate to Divi in the left sidebar menu and select Theme Customizer.
3. Inside the Customizer panel, select Header & Navigation to expand header layout controls.
4. Click on Secondary Menu Bar to open the visual controls for the top utility strip.
5. Locate the setting labeled Show Social Icons near the middle of the control list.
6. Uncheck the box next to Show Social Icons. The live preview window on the right will immediately update, hiding the icon set from the secondary header strip.
7. Click the blue Publish button at the top left of the Customizer panel to save your changes permanently.

Pro-Tip: If the social icons vanish in the live preview panel but remain on your live website after publishing, your browser or server is serving a cached version of the compiled static stylesheet. Clear your site plugin cache and purge the Divi Static CSS file generation system to force the stylesheet to update.

Method 2: Disabling Individual Networks via Divi Theme Options

If you prefer to keep the secondary menu bar active but want to turn off specific platform icons (such as Facebook or Twitter) while keeping contact details intact, you can disable them globally.

1. From the WordPress Dashboard, navigate to Divi and click on Theme Options.
2. Ensure you are viewing the General tab (selected by default).
3. Scroll down to the global social media toggles list. You will see individual controls such as Show Facebook Icon, Show Twitter Icon, Show Instagram Icon, and Show RSS Icon.
4. Toggle the switch to Disabled for every individual social network you wish to remove from your site headers.
5. Scroll to the very bottom or top of the page and click the green Save Changes button.
6. Return to the frontend of your website and refresh the page to confirm that the targeted networks have been purged from the secondary navigation bar.

Method 3: Removing Social Modules inside Divi Theme Builder Headers

If your website uses a custom global header created with the Divi Theme Builder, settings in the Theme Customizer will have no effect. Theme Builder layouts completely replace the default secondary header HTML structure with dynamic layout modules.

1. Go to Divi in your WordPress dashboard and select Theme Builder.
2. Locate the Global Header template card (or the specific custom header template applied to your target pages).
3. Click the Edit Icon (pencil symbol) inside the green Global Header area to launch the visual page builder environment.
4. Locate the top section or row representing your secondary bar header layout.
5. Identify the module generating the social icons. This is typically a Social Media Follow module, a Text module containing custom icon shortcodes, or an Blurb module.
6. Hover over the module until the grey module control bar appears, then click the Trash Can icon to delete the social element entirely.
7. Alternatively, if you want to keep the module for desktop viewports but hide it on smaller screens, open the Module Settings (gear icon), navigate to the Advanced tab, expand Visibility, and check the boxes to hide the module on Phone, Tablet, or Desktop.
8. Click the green checkmark at the bottom right of the module settings box.
9. Click the three dots icon at the bottom center of the screen, then click Save in the bottom right corner of the builder interface.
10. Exit the Theme Builder by clicking the X icon in the top right corner.

Warning: Deleting a Social Media Follow module inside a Global Header layout deletes it across your entire website globally. If you need to retain the social links on specific pages or sub-sections, duplicate the template first before making structural deletions.

Method 4: Overriding Hardcoded Icons using Custom CSS Rules

In cases where third-party plugins, custom child themes, or stubborn custom code inject social icons into the secondary header wrapper #top-header, you can force-hide them using targeted CSS rule declarations.

1. Navigate to Divi > Theme Options from your WordPress Dashboard.
2. Scroll down to the very bottom of the General tab to locate the Custom CSS text box.
3. Add explicit rule declarations targeting the secondary header social icon structural container. Type the selector #top-header .et-social-icons into the editor followed by an opening bracket, the property display: none !important;, and a closing bracket.
4. If your theme framework uses the secondary menu navigation link container directly, target the selector #et-secondary-nav .et-social-icons with the same display: none !important; rule block.
5. Click the green Save Changes button at the bottom of the screen.
6. Inspect your frontend header using browser developer tools to verify that the #top-header DOM element set to hidden no longer occupies visual screen space.

Architectural Comparison of Header Modification Methods

Choosing the correct method for removing social icons depends on your specific Divi theme configuration, technical requirements, and performance targets. The table below outlines how each method operates under the hood.

Troubleshooting Common Header Modification Failures

Modifying utility bars in complex WordPress environments can sometimes lead to caching mismatches, visual bugs, or responsive layout issues. Below are common failure scenarios alongside their exact root causes and corrective steps.

Scenario 1: Social Icons Remain Visible After Saving Settings

• Root Cause: Divi utilizes built-in static CSS file generation that caches stylesheet rules. Additionally, server-side caching or page performance plugins (such as LiteSpeed Cache, WP Rocket, or SiteGround Optimizer) continue to serve pre-rendered HTML copies of the page.
• Actionable Fix:
  
  
  1. Navigate to Divi > Theme Options > Builder tab > Advanced tab.
  2. Locate Static CSS File Generation and click the Clear button next to it.
  3. Purge your active WordPress caching plugin's cache.
  4. Clear your browser cache or open an incognito window to verify the update.

Scenario 2: Secondary Bar Displays Empty Blank Space or Excessive Padding

• Root Cause: When social icons are removed, the secondary header container #top-header retains its min-height and padding values, causing an empty gray or black bar to display above your main navigation.
• Actionable Fix:
  
  
  1. Go to Divi > Theme Customizer > Header & Navigation > Secondary Menu Bar.
  2. Adjust the Height slider to reduce overall container height, or remove phone number/email contents if you want the entire top bar to collapse.
  3. If no text elements remain in the top bar, set the background color to transparent or uncheck the secondary bar functionality altogether to hide the top container completely.

Scenario 3: Social Icons Hidden on Desktop Still Appear on Mobile Views

• Root Cause: The standard Divi mobile navigation engine processes top bar elements differently than desktop viewports, often relying on separate responsive stylesheet rules, or a custom Theme Builder mobile layout override is active.
• Actionable Fix:
  
  
  1. If using the Theme Builder, switch the design viewport to Mobile view at the bottom left of the builder screen.
  2. Verify whether a secondary mobile header row exists that contains duplicate Social Media Follow modules.
  3. Delete or adjust visibility for the mobile-specific elements independently, then re-save the global template.

Scenario 4: Specific Network Icons Persist While Others Disappear

• Root Cause: Non-standard social icons or custom SVG graphics were manually injected into the Secondary Menu text box (found in Theme Customizer > Header & Navigation > Header Elements) using HTML link tags or third-party icon font shortcodes.
• Actionable Fix:
  
  
  1. Go to Divi > Theme Customizer > Header Elements.
  2. Check the text fields for Phone Number and Header Text.
  3. Remove any standard HTML anchor tags or icon shortcodes typed into these text input fields.
  4. Save and publish the changes.

Frequently Asked Questions

Can I turn off specific social media icons while keeping others in the secondary bar?

Yes. Navigate to Divi > Theme Options > General tab, scroll down to the global social toggles list, and individually disable the networks you wish to hide (e.g., set Show Twitter Icon to Disabled while keeping Show Facebook Icon set to Enabled).

Why are social icons still showing after turning them off in the Theme Customizer?

This usually occurs because your site is utilizing a custom header created inside the Divi Theme Builder, which completely overrides default Theme Customizer settings. To remove icons on Theme Builder headers, you must edit the Global Header template directly and delete the Social Media Follow module.

Will turning off secondary bar social icons delete my social profile URLs in Divi Theme Options?

No. Turning off social icons inside the Theme Customizer or via Theme Options toggles only hides their visual display on your frontend layout. Your defined social network URLs saved in Divi Theme Options remain safely stored in your database.

Does hiding social icons via custom CSS reduce my site's page load speed?

Hiding elements using CSS display: none; hides them visually, but the raw HTML elements and associated icon font files are still fetched by the browser. To optimize performance and reduce DOM size, it is best to remove them natively using the Theme Customizer or Theme Builder methods rather than relying purely on CSS overrides.

How do I completely hide the entire secondary top header bar if I don't need it?

If your top bar contains no phone numbers, emails, or social icons, you can collapse it completely by navigating to Divi > Theme Customizer > Header & Navigation > Secondary Menu Bar and setting the background color transparency to fully transparent, or by setting its height to zero.

Professional WordPress & Divi Performance Optimization

Optimizing your website's visual hierarchy is essential for building clean user experiences and maximizing conversion potential. If your website is experiencing structural layout bugs, slow page speeds, or complex Divi header builder conflicts, our expert technical WordPress team can help. Contact our technical specialists today to perform a comprehensive Divi site audit, optimize your CSS architecture, and elevate your core web vitals performance.