To hide the navigation links (including the search icon) in the Divi Theme’s header, you can add the following CSS:
#et-top-navigation { visibility: hidden; }
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.
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.
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; }
}
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 😉
🙂
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!
Hi Mark, try this:
https://divibooster.com/make-the-divi-header-hidden-initially-but-with-the-logo-showing/