Hide logo in Storefront theme on one page

Viewing 10 replies - 1 through 10 (of 10 total)
  • linux4me2

    (@linux4me2)

    6 years, 10 months ago

    Have you tried something like this, substituting the page id for XX in all three locations in the selector below:

    
.page-id-XX .site-header .custom-logo-link img, .page-id-XX .site-header .site-logo-anchor img, .page-id-XX .site-header .site-logo-link img {
  display: none;
}
    Thread Starter keelyct

    (@keelyct)

    6 years, 10 months ago

    Hi, thanks for helping. I have just tried your suggestion but it makes no change.

    I can remove the navigation and I can remove the footer but I cannot get the logo to disappear! 🙂

    p.s did remove those before I tried your suggestion just in case of conflict.

    linux4me2

    (@linux4me2)

    6 years, 10 months ago

    If you post a link to your site, you can probably get more help with this; without looking at your actual CSS, I’m guessing the classes based on a default Storefront install.

    Thread Starter keelyct

    (@keelyct)

    6 years, 10 months ago

    Yes that might help! Sorry

    The site is https://trendybabybox.com

    Right now the page I am trying to edit is in draft as its not ready, but hopefully from the other pages you might be able to see what needs to be done.

    Thank you!

    linux4me2

    (@linux4me2)

    6 years, 10 months ago

    This worked for me, though you’ll need to add your page-id-XX class to it:

    
.custom-logo {
	display: none;
}

    If that doesn’t work, once you have the actual page up, if you provide a link to it, I can take a look and see if I can tell why it doesn’t.

    Thread Starter keelyct

    (@keelyct)

    6 years, 10 months ago

    Yes!! Thanks so much it worked. Unfortunately I am now stuck with a big white space where the logo and navigation was, so now I need to get rid of that 🙁

    linux4me2

    (@linux4me2)

    6 years, 10 months ago

    Good deal!

    You can make eliminating the white space a lot easier by learning to use the developer tools in Chrome or Firefox. They make it easy to find the correct selector(s) and test changes without altering the site.

    Thread Starter keelyct

    (@keelyct)

    6 years, 10 months ago

    Yes, I need to spend some time looking and learning those! 🙂

    RK a11n

    (@riaanknoetze)

    6 years, 10 months ago

    You could also considering using https://woocommerce.com/products/storefront-powerpack/ – it has a header designer module that allows you change/hide several sections of the Storefront header. Makes it a lot easier that fiddling with custom CSS 🙂

    Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    6 years, 10 months ago

    Hey @keelyct,

    For Chrome Developer Tools there is a fantastic free tutorial over at code school sponsored by Google which I would recommend and you will be a Dev Tools master at the end of it 😉

    http://discover-devtools.codeschool.com/

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Hide logo in Storefront theme on one page’ is closed to new replies.