To hide the navigation links (including the search icon) in the Divi Theme's header, you can add the following CSS:
Related Post: Adding CSS to the Divi Theme
This is available in Divi Booster under “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. To do so, you can hide the search icon through the customizer and remove all items from the menu. 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/