How to Turn Off Social Icons in Secondary Bar Divi comes with built-in social media icons that many users find helpful for connecting with their audience. However, not every website needs these icons cluttering their header area. Whether you’re creating a minimalist design, focusing on other calls-to-action, or simply prefer a cleaner look, removing these social icons can help streamline your site’s appearance.
This guide will walk you through three different methods How to Turn Off Social Icons in Secondary Bar Divi. Each approach offers different levels of control and permanence, so you can choose the one that best fits your needs and technical comfort level.
Contents
Understanding the Divi Secondary Bar and Social Icons
The secondary bar in Divi appears at the top of your website, above the main header. This narrow horizontal strip typically contains contact information, social media icons, and sometimes a search bar or additional navigation elements. The social icons in this area link directly to your social media profiles and are designed to encourage visitors to connect with you on various platforms.
While these icons can boost social engagement, they might not align with every website’s goals. Some users prefer to place social icons in the footer, sidebar, or dedicated social media sections instead. Others want to reduce distractions and keep the focus on their main content and conversion goals.
Removing these icons won’t affect your website’s functionality it’s purely a design choice that can help create a cleaner, more focused user experience.
Method 1: Using the Divi Theme Options
The simplest way to remove social icons from your secondary bar is through Divi’s built-in theme options. This method requires no coding knowledge and can be reversed easily if you change your mind later.
Step-by-Step Instructions
First, log into your WordPress dashboard and navigate to Divi > Theme Options. This will open the Divi Theme Options panel where you can control various aspects of your theme’s appearance and functionality.
Once you’re in the Theme Options panel, look for the General tab, which should be selected by default. Scroll down until you find the Header & Navigation section. This area contains all the settings related to your website’s header elements.
Within the Header & Navigation section, locate the Secondary Menu Bar subsection. Here you’ll see several options for customizing your secondary bar’s appearance and content.
Look for the setting labeled Show Social Icons or similar wording. This option controls whether social media icons appear in your secondary bar. Simply uncheck this box or toggle it to the “off” position.
After making this change, scroll to the bottom of the page and click the Save Changes button. Your social icons should now be hidden from the secondary bar.
Advantages of This Method
This approach is beginner-friendly and doesn’t require any technical knowledge. The change takes effect immediately, and you can easily reverse it by following the same steps and re-enabling the social icons option.
Additionally, this method works regardless of updates to your Divi theme, so you won’t need to reapply the changes when the theme updates.
Method 2: Using Custom CSS
If the theme options don’t provide enough control or if you want to hide the icons while keeping the underlying code intact, custom CSS offers a more flexible solution.
The CSS Code
To hide the social icons using CSS, you’ll need to add the following code snippet to your website:
.et_secondary_nav_enabled #top-header .et-social-icons {
display: none !important;
}
This code targets the social icons container specifically within the secondary navigation area and sets it to not display.
Where to Add the CSS Code
You have several options for adding this CSS code to your website:
Option 1: Divi Theme Options
Navigate to Divi > Theme Options and scroll down to the Custom CSS section. Paste the CSS code into the text area and save your changes.
Option 2: WordPress Customizer
Go to Appearance > Customize > Additional CSS in your WordPress dashboard. Add the CSS code and click Publish to apply the changes.
Option 3: Child Theme Stylesheet
If you’re using a child theme (recommended), you can add the CSS code directly to your child theme’s style.css file.
Benefits of the CSS Method
This approach gives you more granular control over the appearance of your social icons. You can modify the CSS to hide icons only on certain pages, change their appearance instead of hiding them completely, or apply different styling rules.
The CSS method also preserves the underlying HTML structure, which can be useful if you’re using any plugins or scripts that interact with the social icons.
Method 3: Using a Child Theme
For users who want maximum control and don’t mind working with theme files, creating a child theme and modifying the relevant template files offers the most comprehensive solution.
Benefits of Using a Child Theme
A child theme inherits all the functionality and styling of the parent Divi theme while allowing you to make customizations that won’t be lost when the parent theme updates. This approach is particularly valuable if you’re making multiple customizations to your website.
Child themes also provide better performance since you’re removing the code entirely rather than just hiding it with CSS.
Creating a Child Theme
Before modifying any files, you’ll need to create a child theme if you don’t already have one. Create a new folder in your /wp-content/themes/ directory and name it something like divi-child.
Inside this folder, create a style.css file with the following header:
/*
Theme Name: Divi Child
Template: Divi
Description: Child theme for Divi
Version: 1.0
*/
@import url("../Divi/style.css");
Next, create a functions.php file in your child theme folder:
<?php
function divi_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'divi_child_enqueue_styles');
Modifying the Header Template
To remove the social icons completely, you’ll need to copy the relevant template file from the parent Divi theme to your child theme and modify it.
Locate the header.php file in your parent Divi theme directory and copy it to your child theme folder. Open the file and look for the section that generates the social icons in the secondary bar.
Find the code that looks similar to this:
if (is_array($et_social_icons) && !empty($et_social_icons)) {
// Social icons code
}
You can either comment out this section or remove it entirely to prevent the social icons from appearing.
Alternative: Using Functions.php
Instead of modifying template files, you can also use your child theme’s functions.php file to remove the social icons functionality:
function remove_divi_social_icons() {
remove_action('et_header_top', 'et_add_social_icons');
}
add_action('init', 'remove_divi_social_icons');
This approach is cleaner and less likely to cause conflicts with theme updates.
Troubleshooting Common Issues
If your social icons are still appearing after following these methods, try the following troubleshooting steps:
Clear Your Cache: If you’re using a caching plugin, clear your cache to ensure the changes take effect.
Check for Conflicting Plugins: Some plugins might override your theme settings. Temporarily deactivate your plugins to see if one is causing the issue.
Verify CSS Specificity: If using the CSS method, you might need to increase the specificity of your CSS selectors or add !important to your declarations.
Review Theme Updates: If you recently updated your Divi theme, some settings might have been reset. Double-check your theme options.
Maintaining Your Customizations
Regardless of which method you choose, it’s important to document your changes for future reference. Keep a record of any custom CSS code or file modifications you’ve made.
If you’re using the theme options method, your settings should persist through theme updates. However, if you’re using custom CSS or child theme modifications, you may need to review and update your customizations when major theme updates are released.
Consider creating a backup of your customizations before making any changes, especially if you’re modifying theme files directly.
Choosing the Right Method for Your Needs
Each method has its own advantages depending on your situation:
- Use Method 1 if you want a quick, reversible solution and don’t need advanced customization options
- Use Method 2 if you want more control over the styling and don’t mind working with CSS
- Use Method 3 if you’re making multiple theme customizations and want the most comprehensive solution
Remember that you can always switch between methods if your needs change over time.
Frequently Asked Questions
Will removing social icons affect my SEO?
No, removing social icons from your secondary bar won’t negatively impact your SEO. You can still include social sharing buttons and links in other areas of your website.
Can I hide social icons on specific pages only?
Yes, using custom CSS with conditional statements, you can hide social icons on specific pages or post types while keeping them visible elsewhere.
What happens if I update my Divi theme?
Method 1 (theme options) will persist through updates. Method 2 (CSS) will also remain unless you’ve added the CSS directly to the parent theme files. Method 3 (child theme) is designed to preserve your customizations through updates.
Can I replace the social icons with other content?
Yes, particularly with Methods 2 and 3, you can replace the social icons with custom content like additional navigation links, contact information, or promotional messages.
Is it possible to style the social icons instead of removing them?
Absolutely. Using custom CSS, you can modify the appearance, size, color, and positioning of the social icons rather than hiding them completely.
