How to Hide the Divi Logo on a Single Page – Divi Nation Short

Posted on June 17, 2016 by in Divi Resources | 53 comments

How to Hide the Divi Logo on a Single Page – Divi Nation Short
Premade Layouts

Check Out These Related Posts

53 Comments

  1. 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.

  2. 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.

  3. Thanks for the easy-to-follow tips. It is a nice option to have in the toolbet.

  4. 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?

  5. 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.

  6. It’s an useful feature. I love using short codes, they are making easier to apply anything.

  7. 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.

  8. 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.

  9. 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

  10. 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 !

  11. Very cool tip, just grabbed it right away for my page. Thank you!!

  12. Would it be better to target .logo_container instead of #logo?

    • Targeting either one though would get rid of the logo.

  13. Thank you very much for this. It was so timely for me as I’ve never had the need for this until today.

  14. Thank you Augustine and Nathan for a very needed quick and easy fix

  15. 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! :)

  16. 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

  17. 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”?

  18. 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.

  19. 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?

  20. 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

  21. 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!

  22. 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 ?

  23. Thank you for the tutorial. Guess I can hide anything based on id number?

  24. Thanks for the tutorial, I was searching for a way to do this and found your article. Great explanation with the small CSS hack!

  25. 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.

  26. 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;
    }

  27. 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!

  28. many for the easy-to-follow tips. It is a nice option to have in the toolbet

  29. thanks a milion

  30. How would you hide just the menu in the header and the menu in the footer on a landing page?

Join To Download Today

Pin It on Pinterest