Welcome to Day 18 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!
It’s Friday and Divi 100 Marathon or not, that means its time for the Divi Nation Podcast. This week we’ve got a Divi Nation Short for you featuring our new Divi video tutorial specialist Augustine Mak. It’s his first appearance on the podcast but I can assure you it will not be the last. In this episode he will show you how to hide the logo on your Divi website on single pages, while leaving it visible everywhere else.
How to Hide the Divi Logo on a Single Page – Divi Nation Short
[powerpress]
In this episode of Divi Nation we show you how to hide the Divi logo on single pages while leaving it visible everywhere else. This is one of those tip requests we get a lot and we thought it was high time we showed everyone how to do it.
For more quick tips like this one and a lot of other fantastic Divi and WordPress related content, subscribe to our YouTube channel using the button below.
Subscribe To Our Youtube Channel
All Subscription Options:
Summary: How to Hide the Divi Logo on a Single Page
What we’r going to do in this Divi Quick Tip is show you how to hide the Divi logo on specific pages using that page’s ID. To begin, navigate in your WordPress Admin to Pages and then click the edit link for whichever page you would like to hide the Divi logo on.
In the URL bar a the top of your screen you will notice that it outputs a specific page ID that such as post=48. Keep that tab open and in another tab go to Divi > Theme Options and scroll down to your Custom CSS panel. Paste the following code into the Custom CSS panel.
.page-id-YOURPAGEIDNUMBER #logo {
display: none;
}
As you can see in the snippet above there is a bit of placeholder text. Replace “YOURPAGEIDNUMBER” with the page ID number that you located in the first step. In my example, the final snippet will look like this.
.page-id-48 #logo {
display: none;
}
When you’ve successfully pasted the snippet and added your page ID number to it, click the “Save Changes” button. You can now go to the page in question on the front-end, refresh, and notice that the logo is hidden.
Next Week on the Divi Nation Podcast
Starting next week on the Divi Nation Podcast I will be interviewing members of our design and development team here at Elegant Themes. These interviews will serve both as an introduction to them personally and to the work they do for the Divi Community on a daily basis. We’ll also be putting particular emphasis on what exactly they are doing to make sure that Divi 3.0 is the best release it can possibly be.
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement or Divi freebie!
Divi 100 Day 18
The Countdown To Divi 3.0
This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.
Great episode guys! Short but sweet! I’m looking forward to seeing more of you Mak!
I think per page ID CSS targeting is a lesser known CSS trick with WordPress in general that can come in handy for small tweaks like you showed.
In addition to the method shown in this video, it’s probably worth mentioning that Divi users don’t necessarily need to target by page ID, but can alternatively use the built in Divi Builder Page settings custom CSS box to paste custom CSS that’s only wanted for one page.
Nice tutorial. Just one question, do you suggest using child theme to manage all the modifications or show I add all these modifications in custom css.
Most site-wide css modifications can be added to the Custom CSS panel as shown in this tutorial. Some people may prefer using their own child theme CSS styles for significant overhauls to the design. Additionally, PHP functions and page template changes require a child theme.
A child theme is handy for changing the footer text and updating divi.
Or can it be done permanently without a child theme?
You can purchase the Divi Booster plugin which adds loads of cool extra options to Divi and includes a footer option where you can enter your text.
Super! Thanks Murray
Can you give a link to the Divi Booster Plugin?
We actually don’t allow product links in our comments. It’s pretty easy to find if you search for it.
I prefer using a child theme simply because (for me) it keeps things tidy. I can open up my style sheet and/or functions.php files in a code editor while developing and I think it’s just easier than using the custom css text box. For a while I started using the custom css areas throughout the divi builder. I quickly discovered that I couldn’t always remember where I put that certain code I was looking for. Whatever you choose to do, be consistent! Consistency will keep your workflow fluent.
Thanks for the easy-to-follow tips. It is a nice option to have in the toolbet.
Nice tuto but with new divi 2.7 there is an easiest way to do it !!
Just go in the new page specific css section of the builder and add :
#logo {
display: none;
}
🙂
Where is that section? I don’t see it….
If you are talking about the sections in each module, which module does it need to be placed in?
Hey there thanks or the podcast. I want to get in and start learning divi. Can you tell me is there a way to setup create a dummy site to play with this not using an actual domain/hosting? I am new to WordPress and haven’t figure out how to do this.
Thanks!
You can do it in your own computer, just install an “AMP Stack” like MAMP or XAMPP. Watch a few tutorial on YouTube how to setup everything.
Very Basic but useful for newbies.
It’s an useful feature. I love using short codes, they are making easier to apply anything.
Hi Guys,
Welcome to the new member “Mak”.
This episode was a bit too short, as beginners will not understand the purpose for taking the logo out of a specific page.
Please could someone elaborate on why should I do that as the logo is the image representing the website or business.
Apart from that, great job as usual.
Looks like we can also hide the Divi logo by adding our own logo right?
Yes, of course. But what this tutorial is actually showing you is how to hide the logo element, regardless of whether or not it’s the “Divi” logo or the logo that you have added in its place.
Before I had a new logo ready, I just added a blank white square. It was quick and easy. And the best part, I didn’t have to add any code.
It should be possible to replace the logo with another logo on the single page (instead of hiding it) while other pages still showing the original logo ? Is it possible?
Kenan
This is actually a great purpose for the tutorial.
Yes it is possible you just need to replace display by a background image.
.page-id-YOURPAGEIDNUMBER #logo {
background-image: url(“/your-image”) no-repeat;
}
it worked for me
Hi Nathan,
Great tutorial as always.
It’ll be great to be able to change logo when scrolling down. Many times, you can display full logo on your navigation menu, but when scrolling down, as DIVI resizes the logo, it’ll be great if it could change to a simpler version (i.e.: Favicon look a like logo).
I have seen many websites doing this and it could be a powerful tool for DIVI.
Keep working, we love DIVI Nation and everything you are doing.
Thanks and look forward to your answer,
Pablo
You can do this. You just target .fixed-header.
Well Pablo we do have a very simple and cheap premium plugin called Divi Logo Swap
It is a a nifty little plugin that changes the logo to a secondary one on scroll.
If you really a different logo on scroll go with that plugin at the elegantmarketplace
Thanks Richard, will look into it !
Very cool tip, just grabbed it right away for my page. Thank you!!
Would it be better to target .logo_container instead of #logo?
Targeting either one though would get rid of the logo.
Thank you very much for this. It was so timely for me as I’ve never had the need for this until today.
Thank you Augustine and Nathan for a very needed quick and easy fix
For a more general and flexible workflow, the following scheme can be used:
install plugin Advanced Custom Fields
add a field “to hide logo”
add code to the child theme, that questions this field and hides, if needed
in each page then, wherever your client or you need it, just put in this field the appropriate value
This scheme can be used in many areas of your website, and is very easy and comfortable in using.
Happy coding! :)
Hey Team DIVI / Elegant,
I have an Idea for you which you can put on any of your 4 to 5 day challenge.
Is there any method to share my idea with you?
Regards,
Yakin
I have no coding experience and the website I manage (with lots of help) uses WordPress…we were looking at going with Divi because I thought Divi was “drag and drop”…with the tutorials and instructions here, it looks like it’s not…are any of your templates truly “drag and drop”?
I would like to hide the logo on all my site. And I would like to hide it on desktop tablet and mobile. How can I do it? Thanks.
How would you “add” your logo to a custom menu using Divi Builder? I have a menu but it won’t show my logo on those pages?
I just posted this question on the Divi Fan Page in FB, but got no response.
Thanks,
Can I help you MR Millard.
I am building conversion focused web applications with Divi and other themes in wordpress.
Divi and Extra themes are really wonderful, awesome and powerful.
You can reach me to yj (at) businesslabs (dot) org
Instead of hiding the logo on specific pages, how could I change the logo to a different version on specific pages?
Essentially, I have someone who would like to have each section of their site “color coded”, so to speak. They would like to have the same logo, but have it be a different color on each section (kind of like the way FedEx has the same logo in different colors for different types of services).
With that, they would like to have other elements of those sections (pages) match. So for example, if the logo were red on the home page, they would like to have red highlights/accent colors, link colors, etc., and then, when someone goes to a different section of the site, they would like all of those elements to change colors along with the logo.
This isn’t possible in the Theme Customizer since that sets the logo and all of those colors globally. Any ideas about how to accomplish this?
Thanks in advance!
Yes I want to use this plugin in my website, Could you please help to download the Plugin ? Also may i change change the position of my logo as per page different page Design ?
Thank you for the tutorial. Guess I can hide anything based on id number?
Thanks for the tutorial, I was searching for a way to do this and found your article. Great explanation with the small CSS hack!
Can you apply a similar code for removing the nav menu on a single page – in the case of using the splash page layout? Using my test site to work on a client project so as new Divi awesomeness arrives, I am testing.
Hey Nathan
If you’re looking to hide the logo on more than one page, you shouldn’t need to duplicate the whole CSS snippet.
Just add extra page-id’s like so:
.page-id-48, .page-id-49, .page-id-60 #logo {
display: none;
}
Is there a similar technique for changing or hiding the entire header section on particular pages? I have searched everywhere to find a way to do this for landing pages, to no avail!
I tried using this same code and just changing the #logo to #header – I’m new to Divi, so I figured it could work! – but it didn’t do anything 🙁
If anyone knows of a way to do this I would be extremely grateful to hear about it!
Never mind – figured it out!
Please share what you did; I want to do the same thing. Thanks!
Molly, I did it this way:
Go to the Divi builder of the page where you want to hide the header > Divi Builder Settings > Custom CSS
Then you paste this:
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
Hope it will help you!
Thanks!
many for the easy-to-follow tips. It is a nice option to have in the toolbet
thanks a milion
How would you hide just the menu in the header and the menu in the footer on a landing page?