Jump to content

How to add a filter to header images only?

Go to solution Solved by Lesum,

Recommended Posts

@atmos For Cart page, try this code only change (body[class*="type-products"].view-item  to  #cart)

#cart header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

#cart header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

#cart header#header .header-announcement-bar-wrapper {
    height: 100% !important;
}

#cart header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
    height: calc(~'100% - 49px') !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#cart header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#cart header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

#cart header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    #cart header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    #cart header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper {
        height: calc(~'100% - 100px') !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #cart header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
       height: 100% !important;
       padding-top: 0 !important;
       padding-bottom: 0 !important;
    }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Just now, Lesum said:

@atmos Awesome! I just checked; it's working correctly. 

Thank you so much for your help. I never would have figured that out on my own. Really appreciate it! I noticed that you have a Buy Me A Coffee site. I’ll definitely contribute something. I may take you up on your paid Squarespace service too at some point if you can help with the optimisation side of things. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.