Are you struggling to remove or hide Divi menu? you have looked at the settings of the theme but couldn't find a way to do that?
Don't worry you're in the right place! because In today's guide we're going to learn how we can hide the Divi primary menu almost anywhere on our website including specific posts, pages, or Woocommerce product pages Besides, removing it on desktop or mobile-only and much more.
I am so excited to go deep into the details so if you're too. Then bring your cup of coffee and Let's jump in straight into it (:
Overview
Menus are an important element that is indispensable in pretty much any kind of website you're designing Although, there are cases where you'll need to get rid of it on the whole website or in specific places.
When you first purchase the Divi theme like any other WordPress theme on the market, it comes with some default settings and a lot of cool features you can add and customize each part of it the way you want through settings.
But, this doesn't mean you'll find every single detail available to customize, you might want to do something special like removing the navigation menu from a specific area on your website which is of course not available in the settings and you'll need some custom code to achieve that and that's what we're going to learn throughout this article.
How to Hide Divi Menu (Steps & Options)
Here we are in the practical part of this blog post where we're going to explain step by step how you can remove the main Divi menu from various places of your website starting by the entire site all the way to very specific pages, posts, or product pages.
First things first, if you want to remove the menu globally from your website we'll use a simple piece of CSS code.
To hide Divi menu from the whole website, follow these steps:
1 – From the WordPress dashboard, Go to Divi > Theme options > Integration
2 – In the <head> of your blog paste the following CSS code snippet:
<style>
/** hide menu links in Divi theme **/
#main-header #et-top-navigation
{
visibility: hidden;
}
</style>Exactly like I did in the screenshot below and don't forget to save changes from the button located on the top left of the theme options panel or in the very left bottom.
If you're using a child theme which is something very recommended, by the way, you'll add this code inside the style.css file.
/** hide menu links in Divi theme **/
#main-header #et-top-navigation
{
visibility: hidden;
}Cool! let's move on to the next option.
What if we want to remove the menu from the home page of our website only and leave it on the rest of the website is that possible?
The short answe is : Yes it's definitely possible to do that.
Here are simple steps you can follow to hide Divi menu on homepage:
1 – From the WordPress dashboard go to Divi > Theme options > integration
2 – copy paste the following custom CSS code in the <head> custom CSS box (as shown below)
Now on the top left corner above the theme options panel click “Save Changes” button.
Here's another situation: we want to have the menu hidden on all the pages and visible on the rest of the website. to do that you can use the following CSS code snippet.
<style>
/** hide Divi primary menu on all pages **/
.page-template-default #et-top-navigation
{
visibility: hidden;
}
</style>Some of you might ask a good question which is: can we hide it from a specific page only instead of all the pages in bulk. and the short answer is: Yes can do that!
Here are the steps you can follow to hide menu on a single page:
1 – From the WordPress dashboard go to the “Pages” tab then underneath the target page for which you want to hide the menu click the “Edit” link.
2 – Now look at the link that appears in your browser address bar and what I want you to look for is the ID number of the page located right after “Post=”. in the example below the ID is 5.
For the example above the CSS snippet will look like the one below. so you will use it to target the desired page by changing “5” with your page ID.
<style>
/** hide divi menu from the page whose ID is 5 **/
.page-id-5 #et-top-navigation
{
visibility: hidden;
}
</style>Another option is you might want to go for is to hide the Divi menu in all the posts and leave it as it's in the rest of the site. this can be easily done and all you have to do is to use the following CSS code.
<style>
/** hide Divi primary menu on all posts **/
.single-post #et-top-navigation
{
visibility: hidden;
}
</style>Similar to what we mentioned for the pages, we can target a specific post by following the steps below:
1 – On the left-hand side of the menu inside your WordPress dashboard, click on “Post”, hover over the desired post for which you need to remove the menu then click the “Edit” link.
2 – Now look at the link that appears in your browser address bar. In order to target the post correctly, we'll need its ID number which is located right after “Post=” which is 129 in the example below.
3 – The code snippet I can use in my case is the following, so copy and paste it and don't forget to change the number “129” with your post ID number.
<style>
/** hide divi menu from the post whose ID is 129 **/
.postid-129 #et-top-navigation
{
visibility: hidden;
}
</style>If you're running an e-commerce store using the Woocommerce plugin and the Divi theme then you might be looking to get hide Divi menu from the products pages and make them a custom unique design. for this purpose, we can use the following CSS code snippet.
<style>
/** hide Divi main menu on all product pages **/
.single-product #et-top-navigation
{
visibility: hidden;
}
</style>In the same way, if you want to hide the Divi menu specifically from some product pages and leave it on the rest on the site then you can follow these steps:
1 – From left-hand side menu of your WordPress dashboard go to Products > All products
2 – Hover over the product you want to target and apply changes on then click the “Edit” link that appears right underneath the product name and you'll see the ID number that we are going to use in the code. (as shown below)
To hide Divi menu on desktop versions, you can follow these simple steps:
1 – Log in in to your WordPress admin dashboard, then Go the custom CSS box from the theme options.
2 – Copy and paste the following CSS code in there then scroll down and click the “Save Changes” button.
<style>
/** hide menu links on desktop only **/
@media only screen and (min-width:981px)
{
#main-header #et-top-navigation
{
visibility: hidden;
}
}
</style>In order to hide the Divi hamburger menu on mobile, we need to apply some custom CSS when the screen width or what we call the breakpoint is usually 767px or less which is the value for the mobile devices.
Here's the snippet you can use.
<style>
/** hide Divi hamburger menu on mobile **/
@media (max-width: 767px)
{
#main-header .mobile_menu_bar:before
{
visibility: hidden;
}
}
</style>For those who are looking to hide the Divi menu links just when the user starts scrolling, here is the snippet of CSS you'll use.
<style>
/** Hide Divi menu On scroll **/
.et-fixed-header #et-top-navigation
{
visibility: hidden;
}
</style>#et-top-navigation .centered-inline-logo-wrap {
visibility: visible;
}Further Reading:
- How to Hide & Remove Divi Header
- Remove Divi logo from Navigation Header
- How to Hide & Remove Divi Footer
- How to Hide or Remove Divi Sidebar?
Roundup
As a web designer or developer creating websites for clients and usually using the Divi theme it's very important you know those tips and tricks because they will save you wasting hours and hours searching for a solution the same hours you can use to focus on other crucial design parts.
In today's guide, we tried to give you the maximum possibilities and explain each one in detail so it won't be a hard thing to achieve your idea even if you're a total beginner who is just starting out a blog or e-commerce shop.
I hope this article was useful to you, if you still have any questions in mind or what to share your thoughts with us drop them in a comment below. Otherwise, Have a fantastic designing journey (:
Cheers!
