How To Turn Off Social Icons In Secondary Bar Divi

Disabling social icons in the Divi secondary menu bar requires toggling settings within the WordPress Customizer, adjusting global header layouts in the Divi Theme Builder, or applying targeted Cascading Style Sheets. By understanding how the Divi framework handles header components, you can streamline your site navigation, maintain a clean minimalist aesthetic, and reduce unnecessary DOM elements for better performance.

Prerequisites & Technical Planning for Divi Header Customization

Modifying the Divi secondary bar demands a clear understanding of the theme's structural hierarchy. The secondary bar, which sits above the primary navigation menu, handles utility elements such as top-bar contact information, utility links, and social media follower icons. Before making adjustments, you must determine whether you are using the default Header Layout provided by the core theme settings or a custom global header built with the Divi Theme Builder.

• Essential Tools: Access to the WordPress dashboard with administrator privileges, an active installation of the Divi theme by Elegant Themes, and a modern web browser equipped with developer inspection tools.
• Mandatory Prerequisite Knowledge: Familiarity with the WordPress Customizer interface, basic understanding of CSS selectors (specifically targeting header elements), and awareness of child theme best practices for custom code implementation.
• Estimated Execution Time & Budget: The standard configuration takes between 3 to 5 minutes to complete, requiring no financial investment beyond your existing Divi subscription.

Step-by-Step Guide to Removing Secondary Bar Social Icons

Step 1: Access the WordPress Customizer

Log in to your WordPress dashboard and navigate to the main administration menu on the left side of the screen. Hover over the Appearance tab and click on the Customize option to launch the live front-end WordPress Customizer. This action opens the visual editor panel displaying a live preview of your website on the right and customizer controls on the left.

Pro-Tip: Always ensure your live site cache is cleared before entering the Customizer to prevent outdated CSS or layout caches from obscuring your real-time modifications.

Step 2: Navigate to Header and Navigation Settings

Inside the WordPress Customizer sidebar, locate and click on the tab labeled Header & Navigation. This section controls the overall structural layout of both your top utility bar and your primary menu bar. Within this menu, look for the sub-category named Top Bar Navigation, which houses the specific visibility toggles for top-bar utility elements.

Step 3: Toggle Off the Social Icons Setting

Scroll down through the Top Bar Navigation panel until you locate the checkbox or toggle switch labeled Show Social Icons. By default, this option is enabled if you have populated your social network URLs in the main Divi Theme Options. Click the toggle switch or uncheck the box to disable the feature instantly, which will remove the social media icon set from the live preview pane on your right.

Warning: Toggling off social icons via the Customizer removes them globally across all pages utilizing the default Divi header. If you are using a custom Theme Builder header, this setting will have no effect, and you must edit the header template directly.

Step 4: Save and Publish Your Modifications

Once you verify that the social icons have successfully disappeared from the secondary bar preview, navigate to the top of the Customizer panel and click the blue Publish button. This action writes the new configuration parameters to your database and deploys the changes live to your front-end visitors. Test your website in an incognito browser window to confirm the icons are gone.

Comparative Overview of Divi Header Management Methods

Common Site Failures and Field Fixes

• Root Cause: The social icons remain visible on the front-end despite being disabled in the WordPress Customizer.
  
  
  • Actionable Fix: Clear your server-side caching, browser cache, and any optimization plugins like WP Rocket or LiteSpeed Cache. Divi often stores old CSS rules in its dynamic CSS file generation system, which can be cleared by navigating to Divi, then Theme Options, clicking the Builder tab, selecting Advanced, and hitting the Clear Static CSS Cache button.
• Root Cause: The Show Social Icons toggle is missing or has no effect on the live website.
  
  
  • Actionable Fix: Check if you have assigned a custom header template inside the Divi Theme Builder. The WordPress Customizer settings do not apply to custom headers. Go to Divi, then Theme Builder, edit your Global Header layout, locate the Menu module or Social Media Follow module, and delete or hide the icons directly inside the builder interface.
• Root Cause: Social icons disappear from desktop views but persist on mobile rendering devices.
  
  
  • Actionable Fix: Mobile headers often rely on separate structural rules or cached mobile stylesheets. Add a targeted CSS snippet to your Theme Options Custom CSS box utilizing display: none declarations specifically bound to the secondary menu social container class to force concealment across all viewport sizes.

Frequently Asked Questions

Can I hide social icons on specific pages only while keeping them on others?

Yes, but this requires using the Divi Theme Builder instead of the global WordPress Customizer. You can create a conditional custom header template and assign it to specific pages, allowing you to include social icons on your blog posts while removing them from landing pages or checkout flows.

Why are my social links still outputting empty HTML tags after turning off the icons?

Divi occasionally leaves empty container wrappers in the Document Object Model even when icons are disabled via the Customizer. If strict DOM cleanliness is required for SEO or performance audits, you can use a few lines of Custom CSS to set the container element to display none.

What should I do if my social profile links are not showing up when turned on?

Ensure that you have entered valid URLs into the corresponding social network fields located under Divi, Theme Options, General. The icons will remain hidden or inactive if the URL fields are left completely blank or formatted incorrectly.

How do I use CSS to manually hide the secondary bar social icons?

You can target the secondary bar social container by navigating to Divi, Theme Options, Custom CSS, and entering the selector rule targeting the top-bar social icons wrapper with a display property set to none. This overrides any conflicting stylesheet rules remaining from third-party plugins.

Master Your Divi Design Workflow Today

Streamlining your website architecture by removing unnecessary interface elements like secondary bar social icons creates a cleaner user experience and faster load times. Implement these structural adjustments today to elevate your web design professionalism and maintain full control over your client or portfolio projects.