To hide the navigation links (including the search icon) in the Divi Theme's header, you can add the following CSS:
/* === Start: Hide the Divi Header Navigation Links === */
/* src: https://divibooster.com/hide-the-divi-header-navigation-links/ */
/* Hide the header navigation links */
#et-top-navigation {
visibility: hidden;
}
/* Don't hide the centered inline logo */
#et-top-navigation .centered-inline-logo-wrap {
visibility: visible;
}
/* === End: Hide the Divi Header Navigation Links === */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.
I pasted this code into the Custom CSS field for a landing page and it worked beautifully – no more leakage to the menu choices, just the option to submit a form or leave. Thanks!
Glad it helped, Tom 🙂
Hello!
I'm trying just to hide a menu item from my mobile menu and still show it in the desktop menu. How can I do this?
Hi Pauli, I've just put up this post explaining how to do it:
https://divibooster.com/hiding-menu-item-from-the-mobile-menu/
I hope it helps, but let me know if you have any questions, etc. Thanks!
Hola! How would I also hide the top banner / announcement bar (where you can have social icons, phone number, and email) as well (above the main menu and logo section? Gracias!
Hi Kristen, if you remove all the individual elements (i.e. the social icons, phone number and email) the bar itself will disappear. You can get remove these elements by going to "Divi > Theme Customizer > Header & Navigation > Header Elements" and unchecking the boxes / deleting the values in the fields. Hope that helps!
Hi!
It hides the logo as well.
Hi Laura, are you using the centered inline header format, by any chance? In this header format the logo is actually placed within the navigation element that my code was hiding. I've just updated the code to stop the logo from being hidden with this header format. I hope it helps, but if you're still having problems, let me know. Thanks!
How to hide the page links of primary menu, but keep the menu visible on the tablet / smartphone? I'm using the secondary menu as main and when I access the website on the tablet / smartphone I get no menu at all
Try this:
@media only screen and (min-width: 981px) { #et-top-navigation { visibility: hidden; } }It wraps the code above in a "media query" which tells the browser to only use the code if the screen is 981px or wider (i.e. Divi's "desktop" width). As a result, the links won't be hidden on tablet / smartphone. I hope that helps!
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!
I've tried these. It works for me.
#et-top-navigation { visibility: hidden; }
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; }
}
🙂
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 😉
Been looking for this for ages, thanks so much!
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/