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.
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!!
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.
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;
}
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.
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.
Hi, can you advise how to hide the primary menu only so it doesn't appear on the homepage? Thank you.
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; }Thanks Dan! Your second suggestion worked :)
Thank you so much!
Life saver! Thanks a lot.
Thank you divibooster!
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.
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; } }Hi Dan.. Awesome, Thanks a bunch :)
This is awesome!! Thanks so much :)
Thank you!
Great tip! Thank you :)
Can you provide a way to remove the phone and email icons? I want to put a tagline there instead.
Hi Tiffany, this post gives a (slightly different) way to do it:
https://divibooster.com/how-to-add-text-to-divi-top-header/
When you've added the tagline, you can then just delete the phone number / email address in the customizer to get rid of their icons.
This seems to have hidden my logo as well….
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.
Does it matter where I paste this code?
Hi Mark, there are a few places you can add the code (any should work), as outlined in this post:
https://divibooster.com/adding-css-to-the-divi-theme/