Divi Booster logo

Divi Booster

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

Related Post: Adding CSS to the Divi Theme

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.

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

Simplify Navigation Customization with Divi Booster!

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

|

Latest Posts

Add a Frosted-Glass Background Blur in Divi

Give your Divi layouts a polished, glassmorphism look by blurring the content behind a semi‑transparent Divi section, row or module. This effect enhances readability over busy or textured backgrounds while preserving the visual impact of your imagery and layout. In...

Customize Lightbox Title Styling in the Divi Gallery Module

Adjust the appearance of the lightbox title that appears when visitors open images from a Divi Gallery to align with your brand and improve readability. Refining the title’s color, size, and weight enhances visual hierarchy, accessibility, and overall polish. In this...

Center the Lightbox Image Count in the Divi Gallery Module

Centering the image count in a gallery lightbox creates a cleaner, more balanced presentation and makes it easier for visitors to see where they are in the image set. This simple visual tweak can enhance readability, especially with larger images and longer captions,...

Style the Divi Gallery Module Lightbox Image Count

Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...

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

Newer Comments →
  1. Riccardo on June 19, 2017 at 10:52 am

    Hi, i used your code:
    /* Hide entire header on homepage */
    .home #main-header { display: none; }

    but in mobile site i've a white 'padding' from top and page doesn't fit well (from top).
    How can i do? Thanks!!

    Reply
    • dan on June 20, 2017 at 5:55 am

      Hi Riccardo, you can use this to change the padding on mobiles (and tablets):

      @media only screen and (max-width: 980px) {
    #main-content .container { 
        padding-top: 58px !important; 
    }
}

      You can adjust the 58px to increase / decrease the amount of padding.

      Reply
      • Riccardo on June 20, 2017 at 1:52 pm

        Thank you, i've resolve with margin and not padding! Thank you!! :)

        .home #main-header { display:none; }

        @media only screen and (max-width: 990px) {
        body{
        margin-top: -163px;
        }

        Reply
  2. Lauren on June 11, 2017 at 7:27 am

    Hi Dan,
    Any suggestions on how to hide the secondary menu on desktop displays, but still maintain it on the mobile and tablets?
    I can hide it overall, but am struggling to differentiate between mobile and desktop in the css.

    Reply
    • dan on June 11, 2017 at 11:25 pm

      Hi Lauren, I think what you want here is a CSS "media query". Media queries can be wrapped around a regular bit of CSS code and specify the conditions under which the CSS applies. For example:

      @media only screen and (min-width: 981px) {
    #top-header { display: none; }
}

      This takes the regular CSS for hiding the top header (i.e. "#top-header { display: none; }") and wraps it in a media query (the @media bit) which specifies that the CSS should only apply when the browser window is at least 981px wide. 981px corresponds with the width at which Divi switches to desktop displays, so the result is that the top header will be hidden on desktop displays, but not on mobile / tablets.

      Reply
  3. Lisa on June 8, 2017 at 1:51 pm

    Hi, can you advise how to hide the primary menu only so it doesn't appear on the homepage? Thank you.

    Reply
    • dan on June 9, 2017 at 7:10 am

      Hi Lisa, one of these two CSS snippets should do the trick:

      /* Hide entire header on homepage */
.home #main-header { display: none; }

/* Hide the menu links / search icon on homepage */
.home #et-top-navigation { visibility: hidden; }
      Reply
      • Lisa on June 9, 2017 at 9:20 am

        Thanks Dan! Your second suggestion worked :)

        Reply
      • Brick on June 10, 2017 at 7:00 pm

        Thank you so much!

        Reply
  5. George on May 1, 2017 at 9:54 am

    Thank you divibooster!

    Reply
  6. Samuel on April 14, 2017 at 7:53 am

    Hi.. is there a way to have this work only on the desktop side? I would like to still have the links visible on mobile.

    Reply
    • dan on April 17, 2017 at 1:17 am

      Hi Samuel, you can make this apply to the desktop only, by changing it to:

      @media only screen and (min-width: 981px) {
    #et-top-navigation { visibility: hidden; }
}
      Reply
      • Samuel on April 20, 2017 at 12:24 pm

        Hi Dan.. Awesome, Thanks a bunch :)

        Reply
  7. Noi on February 17, 2017 at 1:18 am

    This is awesome!! Thanks so much :)

    Reply
  9. Erica Krysta on April 4, 2016 at 11:17 pm

    Great tip! Thank you :)

    Reply
  10. Tiffany on April 3, 2016 at 7:21 pm

    Can you provide a way to remove the phone and email icons? I want to put a tagline there instead.

    Reply
  11. Jordan Campbell on March 20, 2016 at 12:45 am

    This seems to have hidden my logo as well….

    Reply
    • dan on March 21, 2016 at 5:06 am

      Hi Jordan, sorry about that. Changes to the way Divi implements its header stopped the feature from working. I've just updated the post with a (simpler) solution which works with the latest versions of Divi.

      Reply
  12. Mark Thayer on February 19, 2016 at 5:01 pm

    Does it matter where I paste this code?

    Reply
Newer Comments →

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

Divi Booster

Hundreds of new features for Divi!

All licenses are lifetime – pay once, use forever.