Hide the Divi Header Navigation Links

Written by Dan Mossop

If you'd like to hide the navigation links (including the search icon) in the Divi Theme's standard header, here are several options.

Hide the Divi Header Menu within Divi Settings

It's possible to remove the menu links and search icon within Divi itself. To do so:

1. Remove the search icon through the customizer, by disabling it at:

Divi > Theme Customizer > Header & Navigation > Header Elements > Show Search Icon

2. Remove all items from your menu, at:

WP Dashboard > Appearance > Menus

(Alternatively create a new blank menu and assign it to the "Primary Menu" display location.

Hide the Divi Header Menu Links using CSS

To hide the navigation links / search icon in the Divi header, you can add the following CSS:

#et-top-navigation {
    visibility: hidden;
}

Hide the Divi Header Menu Links using Divi Booster

Divi Booster contains an option to hide the Divi header menu links and search icon.

You'll find it in the Divi Booster settings at:

Divi > Divi Booster > Deprecated > Divi 2.3 > Hide header links and search

Note that it’s in the “Deprecated” section as it’s now possible to achieve the same effect within Divi itself, as described above. But the Divi Booster feature still works and you may wish to use it if you find it more convenient.

Simplify Navigation Customization with Divi Booster!

Remove unwanted header navigation links effortlessly with Divi Booster. Streamline your site without hassle - perfect for quick customization!

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

52 Comments

  1. I pasted this code into the Custom CSS field for a landing page and it worked beautifully – no more leakage to the menu choices, just the option to submit a form or leave. Thanks!

    Reply
    • Glad it helped, Tom :)

      Reply
  2. Hello!
    I'm trying just to hide a menu item from my mobile menu and still show it in the desktop menu. How can I do this?

    Reply
  3. Hola! How would I also hide the top banner / announcement bar (where you can have social icons, phone number, and email) as well (above the main menu and logo section? Gracias!

    Reply
    • Hi Kristen, if you remove all the individual elements (i.e. the social icons, phone number and email) the bar itself will disappear. You can get remove these elements by going to "Divi > Theme Customizer > Header & Navigation > Header Elements" and unchecking the boxes / deleting the values in the fields. Hope that helps!

      Reply
  4. Hi!

    It hides the logo as well.

    Reply
    • Hi Laura, are you using the centered inline header format, by any chance? In this header format the logo is actually placed within the navigation element that my code was hiding. I've just updated the code to stop the logo from being hidden with this header format. I hope it helps, but if you're still having problems, let me know. Thanks!

      Reply
  5. How to hide the page links of primary menu, but keep the menu visible on the tablet / smartphone? I'm using the secondary menu as main and when I access the website on the tablet / smartphone I get no menu at all

    Reply
    • Try this:

      @media only screen and (min-width: 981px) {
          #et-top-navigation { visibility: hidden; }
      }
      

      It wraps the code above in a "media query" which tells the browser to only use the code if the screen is 981px or wider (i.e. Divi's "desktop" width). As a result, the links won't be hidden on tablet / smartphone. I hope that helps!

      Reply
  6. How do you hide the navigation without hiding the Logo? I've created a menu with no pages on it, and "home" still shows no matter what I do. I just want the logo to show– it's a one-page site.

    Reply
    • Hi Debbie, this code should do what you want. On my test sites it correctly hides the navigation without hiding the logo. If you're not finding this to be the case, perhaps you can send me a link to the site you're working on so that I can take a look? Thanks!

      Reply
    • I've tried these. It works for me.

      #et-top-navigation { visibility: hidden; }

      Reply
  7. thanks man

    Reply
  8. Hi Dan
    Will this work only for one page, say the landing page, but the menu remain visible on the rest of the website? And yes I still want to keep the logo and contact number at the top. Where exactly will I then paste this code please?

    Reply
    • Hi Inet, if you go into the edit screen for the landing page, you should see a three-lined "hamburger" menu in the top right of the purple Divi Builder area. Click on this and you'll see a "Custom CSS" box. If you paste the code in there, it'll apply just to that page. This will leave the menu visible on the rest of the site, and shouldn't hide the logo or contact number. Hope that helps.

      Reply
      • Worked! Thank you!

        Reply
  9. Hi Dan,

    My issue is that some of my header menu items are custom links and some are pages. when I click on a page link on the menu bar it takes me to the page but then if i try to click on one of the custom links in the menu bar, while not being on the homepage, it does not take me to that section. It only shows the url in the address bar up top but doesn't do anything. Do you know how to fix this?

    Reply
    • Hey Jennine, I'm not quite sure what'd be causing that behavior. Is there any chance you can send me a link to the site so that I can take a look? (NB: The URL linked in your comment, leadhership.bmctsamplesite.com, but it doesn't seem to be working). Thanks!

      Reply
  10. What about hiding it only on mobile? I'm using the plugin Superfly — Responsive WordPress Menu Plugin but the default Divi mobile menu is also showing at the same time.

    Reply
    • I got it, I used
      @media only screen and ( max-width: 768px ) {
      #main-header { display:none; }
      #page-container { padding-top:0px !important }
      #main-footer { display:none; }
      }

      Reply
      • :)

        Reply
      • Thanks Robert, Only took me about 2 hours to find this post after trying a bajillion different snippets.

        I have a landing page with no menu structure (other than a phone # & Email in the secondary menu) and I kept getting the hamburger icon on the mobile menu even though the primary menu was completely empty.

        Your CSS snippet worked perfectly ;-)

        Reply
      • Been looking for this for ages, thanks so much!

        Reply
  11. Hi Dan,

    Great work here!

    I was wondering if there was a way to hide the menu and search (have the logo remain) but then have them appear on scroll. How do you do this?

    Thanks!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts