Remove Divi logo from Navigation Header (Full Guide)

You're definitely not the only one wondering how to remove Divi logo from the navigation header.

When you first buy Divi Theme or any other WordPress theme on the market, it comes with some default header settings that you can change from the theme settings but that doesn't mean you'll find every tiny detail integrated and available for you to control.

For example, removing the logo is not available among the default Divi Theme settings. does this mean we cannot customize it the way we want and we have to make what is possible from the settings?

Of course not!

In this article we're going to learn how we can remove the logo from the navigation header not from the entire site only but from any place anywhere on your website very easily. sounds amazing right?

Without further ado …

Let's Get started!

Before You Start

Before we start and dig deep into the details let's discuss some points.

1 – Why Hide or Remove Divi Logo?

There are many reasons for which you or your web design client might want to remove the logo from the header of the website.

Here are some of them in our opinion:

Designing a landing page for commercial purposes so you don't actually need any logo, you just want something quick and simple
Want to remove the logo from specific pages like the 404 error page and search result page.

Your vision of the site is not to create a brand you just need some simple information to be discovered by people.
Adding a forum or a blog as a sub-domain of the actual site so you don't need to create a logo for it because people already know that's your blog or forum.
Just starting out testing things and don't have an idea for the logo in mind yet.

2 – Important to know

As we have mentioned in a variety of our articles. we do recommend that you set up a child theme and have all the custom codes applied to it instead of editing the Divi theme core files.

Simply because if you tried to update to the latest version of the theme, later on, the customizations you have done and put so much effort into them will be lost.

I just wanted to remind you before you go ahead and add any custom codes.

Hide & Remove Divi Header Logo [Full Guide]

Here we are on the practical side of today's guide where we'll walk you through step by step how you can hide the Divi header logo explaining all the options and methods you can use.

Let's dive in to the details …

1 – Remove logo globally from Divi theme

To remove the logo globally from your Divi website you can use the built-in option in the theme customizer or add a custom CSS code.

From the Theme customizer:

1 – Login to WordPress dashboard, Hover over “Divi” then choose “Theme customizer”

2 – From the settings click “Header & Navigation” option

3 – From the list that appears below, choose “Primary Menu Bar”

4 – In the primary menu bar settings, check the box next to “Hide Logo image” option.

5 – On the top left, hit “Publish” button to save the changes.

This was a way of doing it, let's see how we can utilize CSS to achieve the same result.

Using Custom CSS:

To do that we'll need the following CSS snippet, so copy it and follow the steps underneath.

<style>
/** remove the logo site-wide **/
#main-header #logo 
{
	display: none;
}
</style>

1 – From the WordPress dashboard navigate to “Divi” tab then choose “Theme options”

2 – What you see now is the Divi theme options panel, click on the “integration” tab

3 – Paste the snippet of CSS you have copied in the <head> section of your blog (as seen below)

4 – Scroll up and click “Save Changes” button located in the top left corner of the theme options panel.

2 – Hide Divi logo on all posts

is it possible to remove it on all posts instead?

The short answer is : Yes we can achieve that using CSS.

To hide Divi logo on all posts, follow these simple steps:

1 – Login to your WordPress dashboard and navigate to Divi > Theme options > integration.

2 – In the <head> section you have to copy and paste the following snippet and the logo will be removed right away, pretty easy!

<style>
/** remove divi logo from all posts **/
.single-post #main-header #logo 
{
	display: none;
}
</style>

Remove Divi Logo on a single post

Now, what if we would like to have the change applied to a particular post instead of all posts. that's a good question. we'll use the following snippet with X being the ID number.

<style>
.postid-X #main-header #logo 
{
	display: none;
}
</style>

To find the ID of a post go to “Posts” and click “Edit” under the post you want to target, once the editor finishes the loading look at the browser address bar and you see the ID number just after “post=”.

Here are the steps to remove Divi logo on a single post:

1 – From the wordpress dashboard left-hand side menu navigate to Divi > Theme options > Integration.

2 – Copy and paste the following CSS code snippet in there and don't forget to place the ID number of the targeted post.

For instance, the ID of my post is 3, the CSS snippet will look like the following:

<style>
/** remove logo from the post whose ID is 3 **/
.postid-3 #main-header #logo 
{
	display: none;
}
</style>

3 – Hide Divi logo on all pages

The process for pages is almost the same as we did to posts, the only difference is in the snippet so instead of the one we used for posts, you need to use the following:

<style>
/** remove logo from all pages **/
.page-template-default #main-header #logo 
{
	display: none;
}
</style>

Remove Divi Logo on a single page

I heard someone of you saying is it possible to target a specific page just like we did to the posts and the answer for this question is definitely a big YES!

You need the ID of the page and you can find it by going to “Pages” and following the same steps we did for posts.

when you get the ID number then use the following CSS snippet and change the letter “X” with your page ID.

<style>
/** remove the Divi logo from a specific page **/
.page-id-X #main-header #logo 
{
	display: none;
}
</style>

4 – Hide Divi logo on all category pages

The same concept applies to the category pages, the only change again is in the CSS snippet so we're going to use the following one this time:

<style>
/** remove divi logo from all category pages **/
.category #main-header #logo 
{
	display: none;
}
</style>

Remove Divi Logo on a single category page

The general snippet is the following with “X” being the category ID number.

<style>
/** Remove logo on a single category page **/
.category-X #main-header #logo 
{
	display: none;
}
</style>

To find the ID number and target that specific category page on WordPress simply, navigate to Posts > categories then click the “Edit” link just below the chosen category name then look at the link in the address bar.

You will see a long link like the following but the only part we need is the number that comes after “ID”.

In my case, the ID number is 19 (as shown above) so the snippet after changing variable “X” will look like this:

<style>
/** Remove logo on category page whose ID is 19 **/
.category-19 #main-header #logo 
{
	display: none;
}
</style>

5 – Hide Divi logo on all product pages

You're just have finished setting up your Woocommerce shop with Divi theme and you're looking for a way to remove the header logo from all the product pages for whatever reason. don't worry, I have got you covered in today's full guide.

The steps are the same ones we did for the category pages and the snippet to use is this one:

<style>
/** Remove Logo from Product pages **/
.post-type-archive-product #main-header #logo 
{
	display: none;
}
</style>

Remove Divi Logo on a single product page

You only to hide or remove the Divi logo from a single product page. that's also very possible with CSS. The only thing you need is the ID of that particular product and you can find it by going to the left-hand side menu inside your WordPress dashboard then navigating to product > all products.

Underneath the desired product you will see “ID : “ followed by a number and that's exactly what we need.

You need to replace the variable “X” in the following snippet with your product ID and add it as a custom CSS section.

<style>
/** Remove divi logo from a specific product page **/
.postid-X #main-header #logo 
{
	display: none;
}
</style>

That's it for getting rid of the logo in various places of your website, let's continue to see some options in case you want to hide it a certain device instead.

6 – Remove Divi logo on Desktop

Here are the simples steps to remove Divi logo on desktop:

1 – In the very bottom of the left-hand side menu Hover over “Divi” tab and select “theme options”

2 – From the theme options panel, click “integration” then copy and paste the following the CSS snippet:

<style>
/** Remove divi logo on desktop **/
@media only screen and (min-width: 981px)
{
   #main-header #logo 
   {
       display:none;
    }
}
</style>

7 – Remove Divi logo on Mobile

Now, what if you want to do the opposite of the situation above and hide the logo on mobile devices instead. that's would be easy as well.

Here are the steps to remove divi logo on mobile:

1 – Login to WordPress then navigate to Divi > theme options > integration

2 – Once you're in the theme options panel click “integration” and copy-paste the CSS snippet below in the <head> of your blog section.

<style>
/** get rid of divi logo on mobile **/
@media (max-width: 480px)
{
   #main-header #logo 
   {
       display:none;
    }
}
</style>

FAQs

Remove Divi logo when scrolling

One of the amazing trick I like to implement in my design is to make the logo disappear once the user start scrolling and leave the only the menu in the navigation header.

Here's the steps to remove divi logo when scrolling:

1 – Login to WordPress and Go to Divi > theme customizer > Header & Navigation > Fixed navigation settings

2 – from the settings list. put a check mark on “Hide Logo image” option

Further Reading:

Roundup

Knowing how to remove Divi logo from any page on your website is very useful especially if you're designing websites for clients and small businesses, there are many situations where you'll need to deal with custom snippets of code to achieve the desired result.

I hope this was helpful for you and you enjoyed learning these tricks, if you still have any questions feel free to drop theme in a comment below Otherwise, do let me know what is the situation in which you needed to remove the logo?

Cheers!