Select Page

How to Hide Divi Secondary Menu Bar (Top Header)

  1. Home
  2. »
  3. Divi
  4. »
  5. How to Hide Divi Secondary Menu Bar (Top Header)

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

hide divi secondary menu bar
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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!

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.

divi secondary menu
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

1 – Remove Divi Top navigation bar from the entire site

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).

divi top navigation header
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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;
}

3 – Hide Divi secondary menu on Mobile

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.

hide divi secondary menu on mobile
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

hide divi navigation bar on desktop
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

wordpress post ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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=”.

WordPress page ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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)

woocommerce product ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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:

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!

6 Comments
  1. Marc

    Thank you very much. If I hide the secondary menu, an empty column then appears where the secondary menu is. How to solve this?

    • Hassan Sahlaoui

      Hey Marc, I am glad this was helpful for you. if you’re going to disable it on the entire site then I recommend you do that from the theme settings by going to Appearance > customize > Header & Navigation > Header > Elements instead of the code snippet as it automatically adjusts everything for you. BUT if you would like to remove it somewhere specific then just let me know or provide the URL of your site and I will be happy to help you figure it out!

  2. Wayne Allen

    I made the secondary header not sticky, but it left a gap where the secondary menu and the main top menu is. What would be the code to move the main menu to the top after the secondary menu goes by?

    • Hassan Sahlaoui

      Hi Wayne,

      I hope you’re doing well and safe!

      When you remove the secondary menu it leaves a small gap that because of the padding value added to the main header you will need to change it in order to make the main navigation stick to the top. you can use the following code and I hope the issue will be fixed.

      body.admin-bar.et_non_fixed_nav.et_transparent_nav.et_secondary_nav_enabled #main-header, body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header
      {
      top:32px!important;
      }

    • Hassan Sahlaoui

      Hi again, I checked the website and it looks just fine on my end. Anyway, you can use a snippet of JQuery code to override the default “Top” CSS value set by the theme.

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This