How to turn off social icons in secondary bar Divi is a common question for many WordPress users. If you are using the Divi theme, you may have noticed the secondary menu bar above the main navigation where, by default, icons like Facebook, Twitter, and Instagram appear.
For many users, these icons are helpful. But for others who want a cleaner design or prefer custom social sharing options, removing them becomes important.
In this guide, you will learn how to turn off social icons in secondary bar Divi step by step. We will also explore different methods, from theme settings to custom CSS, so you can choose what fits your workflow best.
Why Should You Turn Off Social Icons in Secondary Bar Divi?
Before jumping into solutions, let’s understand the reason behind hiding social icons in Divi.
- Cleaner Design: Many websites want a professional look without extra clutter.
- Custom Branding: You might be using a plugin like Monarch or another tool to manage social links instead of the built-in icons.
- Performance: Fewer elements mean faster page loading.
- User Experience: Too many icons can distract visitors from your main navigation.
If any of these reasons apply to your site, turning off social icons in the secondary bar is a smart move.
Method 1: Turn Off Social Icons Using Divi Theme Options
The simplest way to remove these icons is through Divi’s built-in theme options.
- Login to your WordPress dashboard.
- Navigate to Divi → Theme Options.
- Open the General tab.
- Scroll down until you find the settings for Show Social Icons.
- Toggle off the icons you don’t want to appear.
This method is quick and requires no coding knowledge. If you want to disable all icons, simply switch off every option.
Method 2: Turn Off Icons via Header Settings
Divi allows you to customize header layouts through its built-in settings.
- Go to Divi → Theme Customizer.
- Open the Header & Navigation section.
- Select Header Elements.
- Look for the option related to social icons.
- Uncheck or disable it.
This method is useful if you are redesigning your header and want more control over its appearance.
Method 3: Remove Icons Using Custom CSS
Sometimes, theme settings may not fully remove the icons, or you may only want to hide them visually. In such cases, CSS comes to the rescue.
Here’s a simple code snippet you can add:
#top-header .et-social-icons {
display: none !important;
}
To apply this:
- Go to Divi → Theme Options → Custom CSS.
- Paste the above code.
- Save changes and refresh your website.
The icons will disappear instantly without affecting other header elements.
Method 4: How to Turn Off Social Icons in Secondary Bar Divi Using a Child Theme
If you want a more advanced and permanent solution, using a child theme is the best approach.
- Create a Divi child theme (if you don’t have one already).
- Locate the header.php file in your child theme.
- Remove or comment out the PHP code responsible for loading social icons.
- Save and upload the file.
This way, you have full control and your changes won’t be lost after theme updates.
For detailed instructions on creating a child theme, you can check Elegant Themes’ documentation.
Method 5: Hide Icons with a Plugin
If you prefer plugins over manual coding, there are lightweight plugins that allow you to disable Divi elements.
For example, Divi Booster is a popular plugin that provides one-click options for hiding the secondary bar icons.
Steps:
- Install and activate Divi Booster.
- Go to its settings.
- Look for the header customization section.
- Select the option to disable social icons.
This method is beginner-friendly and does not require editing code or theme files.
Troubleshooting Common Issues
Sometimes, even after disabling the icons, you might face issues. Let’s go through some common scenarios.
Icons Still Visible After Changes
- Make sure to clear both your browser cache and the WordPress cache, especially if you are using a caching plugin such as WP Rocket.Refresh your site in an incognito window to double-check.
Icons Disappear but Leave Empty Space
- If you notice extra spacing after hiding icons with CSS, add this extra snippet:
#top-header .container {
display: none;
}
This will clean up any empty space left behind.
Responsive Design Issues
- Test your site on mobile devices to make sure the secondary bar looks neat after removing icons.
- Adjust padding or margins if required.
Best Practices After Removing Social Icons
Once you’ve removed the icons, you may want to offer alternative ways for users to connect with you.
- Add a social media follow widget in your footer.
- Use a dedicated plugin like Monarch for sharing buttons.
- Place icons inside your main navigation if it fits your branding.
- Include email subscription forms for better engagement.
This ensures you are not losing potential social engagement while keeping your header clean.
Helpful Resources
If you would like to explore more about customizing Divi and improving your WordPress skills, here are some reliable resources that can guide you further:
- Divi Official Documentation a complete guide provided by Elegant Themes to help you work with every Divi feature.
- CSS Tricks a popular website packed with tutorials and tips for handling advanced styling and CSS customization.
- WordPress Codex the official WordPress knowledge base where you can find technical references and guides.
These resources are trusted by developers and designers worldwide, making them valuable for anyone who wants to take their Divi site to the next level.
Conclusion
Removing social icons from the secondary bar in Divi is simple when you know the right steps. You can use theme options, customizer settings, CSS, a child theme, or plugins like Divi Booster.
The choice depends on your skill level and how much control you want over your design.
By following this guide on how to turn off social icons in secondary bar Divi, you can create a cleaner, faster, and more professional-looking website that aligns perfectly with your brand identity.
