[Resolved] Trying to target element in header with css

Home Forums Support [Resolved] Trying to target element in header with css

Home Forums Support Trying to target element in header with css

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #650094
    Adam

    Hello. I am having trouble targeting an element properly and was hoping for some advice.

    I am using a plugin (T(-) Countdown) for a countdown clock and have it as a widget in my theme header.

    I want it to display on the homepage header but not on the other pages where the header is also appearing.

    I am able to successfully hide it on all of the pages by adding this css snippet under customize > additional css:

    .header-widget {
    display: none !important;
    }

    So I thought I would be able to use that CSS with the plug in “simple css” on my homepage, to only target the homepage. But it has no affect. Why is that? Is it because I am trying to target the global header and “simple css” can only target the page contents?

    Do you have any advice on solving my problem of hiding the widget within the header on all the pages except the homepage?

    My website has no URL yet so I have included a temp hosts.cx URL.

    Thank you.

    GeneratePress 2.1.3
    #650780
    Leo
    Staff
    Customer Support

    Hi there,

    You should be able to use this CSS to display on home page and hide it on all other pages:

    body:not(.home) .header-widget {
        display: none;
    }

    Let me know if this helps ๐Ÿ™‚

    #653903
    Adam

    Hi Leo,

    Yes that solved my problem.

    Thank you for your time and expertise.

    #654566
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.