Jump to content

Fixed Position Cart - Side of Page

Recommended Posts

https://cosmo-fluid.squarespace.com/?password=pearler

I've positioned my cart and social links to be fixed to the right side of the page. However, I'm noticing the position of the cart doesn't stay the same like the social links do. Here is my code:

 

@media screen and (min-width: 749px) {
  
  .header-layout-branding-center-nav-center .header-actions--left {
    right: 4vw !important;
  	left: unset !important;
	  margin-right: 3vw !important;
    flex: 0 1 25% !important;
  }

  .header .header-actions-action--cart .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .header-actions-action--social {
    position: fixed;
    top: 50%;
    flex-direction: column;
    right: 1vw;
  }
  
  .header-actions-action--social .icon {
    margin-left: -40px !important; //change as necessary
    margin-bottom: 20px;
  }

  .header-actions-action--cart {
    position: fixed;
    right: 30px;
    top: 45%;
  }

  .header-actions--right {
    justify-content: center;
  }
}

 

Any ideas? Thanks!

ezgif-3-60da7d7099.gif

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @PEARLERwork, it seems to me the issue is because the 3 elements are moved independently, or rather moved in 2 groups; the cart and the social icons. And I think some of the code above is actually not doing anything.

The desktop breakpoint in the code is also different to internal SquareSpace breakpoints, so I'm seeing at a certain size, the social icons disappear, leaving only the cart. See below.

The best option would be to move them together in a group, to have them consistent across all sizes.

image.png.ca3f2b7d13c0205625ad5faac8585baf.png

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Custom Code help
 Did I help? 💁‍♀️ I like coffee (Thank you)

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.