Jump to content

Cart page padding with floating cart

Recommended Posts

Site URL: https://www.chicagochamberchoir.org/cart

On my cart page, the top part of the page is partially under the header. I can use the following CSS to fix it:


  /* Header Background on Cart Page */
body#cart .Header {
   background: #ff0000;

body#cart section.Main-content {
   padding-top: 150px;


However, when I add that code to the custom CSS, it seems to break the code I'm using to make the shopping cart float with the user as they navigate the page (see here). This is my current CSS; how can I get the banner spacing I need without breaking the shopping cart float?


@media only screen and (min-width: 760px) 
  header{position:fixed!important;z-index:9999;width:100%;-webkit-box-shadow:0px 3px 15px rgba(100,100,100,.49);-moz-box-shadow:0px 3px 15px rgba(100,100,100,.49);box-shadow:0px 3px 15px rgba(100,100,100,.49)} 
 /* Cart */
 .Cart {
   transition: 0.35s;
 .sqs-pill-shopping-cart {
   display: inline !important;
   opacity: 0.95 !important;
   position: fixed;
   top: 110px;
   right: 20px;
}}@media only screen and (max-width: 480px)


Screen Shot 2020-06-01 at 11.22.24 AM.png

Edited by Ronia
Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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.