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.
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.
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!
Amazing thank you so Much
thanks man
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?
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.
Worked! Thank you!
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?
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!
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; }
}
Been looking for this for ages, thanks so much!
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/