How do I make my logo and search icon absent on a single page?

To Whom it May Concern,

I am trying to hide my logo and my search icon (that's the magnifying glass icon) hidden on a single page of my site. The page url is art2lifeacademy.com

How would I achieve this?

Best, Nicholas

  • Adam Czajczyk
    • Support Gorilla

    Hello Nicolas,

    I hope you're well today and thank you for your question.

    I can see that this is "one pager" site so I hope I understood you right :slight_smile: You may remove main logo and the search icon from header by adding these custom CSS rules to the site:

    .logo_container {display:none;}
    #et_top_search span:before {display:none;}

    To apply that CSS to the site please look for "Custom CSS" option in your current theme's settings and put it there. If there's no such option you may use a "Simple Custom CSS" plugin instead:

    https://wordpress.org/plugins/simple-custom-css/

    I hope that helps!

    Best regards,
    Adam

  • Nicholas
    • Site Builder, Child of Zeus

    Adam,

    Thank you for the quick response.

    So this is actually not a 1 pager site. However, in order to see the rest of the content on the site, you must be logged in. The landing page (www.art2lifeacademy.com) is the ONLY page people will be able to see who are not logged in, and it is that page that I want to hide/take away the logo and the search icon.

    Does that change your suggestion on how to do this? I've granted you access to my site as well.

    I look forward to your response.

  • Dimitris
    • Support Star

    Hello Nicholas,

    I hope you're doing good and don't mind skipping in! :slight_smile:

    Can you please try the following snippet instead?

    body.home .logo_container {display:none;}
    body.home #et_top_search span:before {display:none;}

    Looking forward for your results! :slight_smile:

    Warm regards,
    Dimitris

  • Nicholas
    • Site Builder, Child of Zeus

    Dimitris,

    So that unfortunately did not work - what ended up happening what that the magnifying glass icon disappeared from all the pages on my website, while the logo remained.

    Any suggestions? What if just the header was entirely absent - or maybe just a white banner - for the home page (art2lifeacademy.com)? That would work.

    Best, Nicholas

  • Predrag Dubajic
    • Support

    Hi Nicholas,

    In your Appearance > Custom CSS panel I have added below CSS code and cleared the cache, logo and search are now not shown on home page for me.
    Can you check and see if it that's what you wanted to do?

    This is code added:

    /*Hide logo and search*/
    .page-id-3789 #et_search_icon,
    .page-id-3789 .logo_container {
        display: none;
    }

    Best regards,
    Predrag

  • Nicholas
    • Site Builder, Child of Zeus

    Predrag,

    It looks fantastic! Thank you for your help.

    May I ask, out of curiosity, if I ever wanted to bring the logo back, I would just delete the line that reads "page-id-3789 .logo_container {" correct?

    Best, Nicholas

  • Dimitris
    • Support Star

    Hey there Nicholas,

    I hope everything's going well for you! :slight_smile:

    May I ask, out of curiosity, if I ever wanted to bring the logo back, I would just delete the line that reads "page-id-3789 .logo_container {" correct?

    If you want to hide only the search icon you should use

    /*Hide  search*/
    .page-id-3789 #et_search_icon {
        display: none;
    }

    How do I hide the logo and the search icon on this page? art2lifeacademy.com/member-login

    You can spot the specific page class inside the body element, and this goes for all pages. I just use Chrome's developer tools for this. :wink:

    So it should be

    /*Hide logo and search*/
    .page-id-3498 #et_search_icon,
    .page-id-3498 .logo_container {
        display: none;
    }

    Kind regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.