Looking to remove or hide Divi secondary menu?
You're in the right place because in this article we're going to learn how to get rid of that small top bar that appears right above the primary header and contains some information like the email address and the phone number.
By the end of this free guide you'll be able to hide Divi's secondary menu bar:
- From the entire website
- Only when the user starts scrolling down
- Only from Mobile devices
- Only from Desktop
- From all the pages, posts, or product pages
- Only from a single post, page, or product page
so, without more ado, let's dive in to the details!
Contents
Things to know
Before we get into the nitty-gritty of this guide, there are some important notes I want to mention here.
I am going to mention the custom CSS code snippet for each option, so if this is your first time doing changes. I do recommend that you check our article about How to add custom code to the Divi theme. It will help you know how and where to add the codes.
It's recommended that you create and install a child theme before implementing any changes, in that way you won't worry about your modifications being erased after every update which is a very common issue. Moreover, it will help you stay organized as a site owner.
Hide Divi's Secondary Menu Bar (All Options)
Here we are in the practical part of our guide, we're going to walk you through all the options available to hide the Divi secondary menu or the top header bar or as you want to call it. it's the one shown below.
To remove the top navigation bar from your entire Divi website we have mainly two options: the first one is a simple trick we can do through the theme customizer and the second one is focused on adding a small piece of code.
From Divi Theme Customizer:
In this option we are going to log in to our WordPress admin dashboard then, navigate to Appearance > customize > Header & Navigation > Header > Elements (as shown below).
You'll go ahead and uncheck the “Show Social Icons” option then empty the “Phone Number” and “Email” fields, click “Publish” then Divi will automatically hide the top navigation header since there are no elements to display and that's the trick.
One small note here is that you also need to delete any menus that are configured to show there in order to hide Divi secondary menu successfully. You can do that by navigating to Appearance > Menus.
Using Custom CSS:
If you prefer to add some code instead of the method explained above then you can simply use the following custom piece of code and it will do the same for you.
/** hide divi secondary menu site wide **/
#page-container #top-header
{
display: none!important;
}2 – Hide Divi Top Header on Scroll
To hide the Divi Top header on the scroll you need to target the CSS class that's being added to it using JavaScript, Here's the CSS snippet to use to achieve what you're looking for.
/** hide divi secondary menu on scroll **/
div#top-header.et-fixed-header
{
display: none!important;
}To hide the Divi secondary menu on Mobile we'll use the CSS media query to make the menu disappear once the screen width reaches a maximum value of 767px which is the tablet and mobile screen width in most cases.
Here's a simple CSS code to add in order to do that.
/** hide divi secondary menu on mobile **/
@media(max-width: 767px)
{
#top-header {display: none;}
}Cool! this code will hide Divi secondary menu as long as the screen width is less than or equal to 767px which is what we need to make it hidden on mobile and tablet devices.
4 – Remove Divi Top Header on Desktop
In the same way, we can reverse what we did for mobile and make the CSS rule that hides the top bar works only when the screen width reaches a minimum value of 980px which is the default breakpoint for the desktop screens In the Divi theme.
That's exactly what I have did in the following CSS snippet.
/** remove divi top header on desktop **/
@media screen and (min-width: 980px)
{
#top-header {display: none;}
}After adding this snippet as a custom CSS to your website, it will hide Divi secondary menu as long as the screen width is greater than 980px which what we need to disable on the desktop.
5 – Going too specific
It's time to level up the game a little bit and suppose you're in a situation where you needed to hide Divi secondary menu bar on specific areas on the site. is that possible?
The short answer is : YES it's very possible with CSS.
Hide Divi top bar from Posts
To hide the top navigation bar from all of your posts you can utilize the following CSS snippet.
/** remove top bar from all posts **/
.single-post #top-header
{
display:none;
}To target only one single post, you need to navigate to Posts > All Posts, click “Edit” for the target post then once you're in the edit post look at the address bar link and copy the number that appears right after “post=” as you can see below.
In the example above the number 48, so the snippet I should add as a custom CSS is the following. You'll do the same and of course, don't forget to place your number instead.
/** hide divi secondary menu from the post with ID: 48**/
.postid-48 #top-header
{
display:none;
}Remove Divi top bar from Pages
If you want to hide Divi secondary menu from all the pages on your WordPress website then you can simply go ahead add the following piece of CSS code.
/** remove top bar from all pages **/
.page #top-header
{
display:none;
}To apply the code to a specific page you will go to Pages > All Pages, click the “Edit” link underneath the desired page. look at the link that appears in the browser address bar. again, we need the number located after “Post=”.
For instance, 156 is the ID number of the page I want to target so the snippet is the following. You can use the same and put in your ID number instead.
/** remove top bar from the page with ID: 156**/
.page-id-156 #top-header
{
display:none;
}Hide Divi top bar from Product pages
If we only assume that you're running an e-commerce shop using the Woocommerce plugin along with the Divi theme and you're looking for a way to remove the top header from all the products page so you can create a custom one with “FREE shipping Worldwide” or those things related to e-commerce.
/** remove top bar from all product pages **/
.single-product #top-header
{
display:none;
}We can also hide Divi secondary menu bar from a specific product page using the woo-commerce product ID which you can get by navigating to Products > All Products then you see the product ID number right underneath the product name. (as shown below)
All you have to do now is to replace the number “102” in the following CSS code then you're ready to go!
/** remove top bar from the page with ID: 156**/
.postid-102 #top-header
{
display:none;
}Futher Reading:
- How to Hide Divi Menu On WordPress
- How to Hide & Remove Divi Header
- Remove Divi logo from Navigation Header
- How to Hide & Remove Divi Footer
Roundup
Just like any other WordPress theme out there, the Divi theme comes with some default settings as well as a variety of settings you can use to customize your website. As for the top header you only have the option to hide it on the entire site but using some custom CSS you can do achieve exactly what you want.
That's it for the hide Divi secondary menu guide. I hope it was helpful and has given you any value, if Yes don't forget to share it, and of course, If you still have any questions in mind or want to share your thoughts feel free to drop them in a comment below. Otherwise, have a good day (:
Cheers!
