Hide logo in Storefront theme on one page

  • Hi All,

    Learning as I go and need to be pointed in the right direction.

    I am working with the storefront theme and the designer, but am trying to do a little custom CSS styling.

    I have managed to remove the navigation menu but I can’t seem to be able to remove the logo from just one page.

    I have tried several variations with page id xx and #logo or .header or .headerclass and such display; none !important but none of them seem to remove the logo from the page.

    What should I be using to do this with this theme?

    Logo was added using the designer

    Thanks

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

  • 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)

    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.

    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)

    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!

    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)

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

    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)

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

    RK a11n

    (@riaanknoetze)

    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

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

    https://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.