Jump to content

Change the order of the cart in the header?

Recommended Posts

Site URL: http://www.scienceisWEIRD.com

I'm trying to unclutter my header, and I've made some progress in that by making the cart "hidden" when it's empty (huzzah!).

But this creates an open space between the main navigation links and the button.

I'd love to move the cart to be before the links. Is this possible?

(Suddenly this seems like an elaborate setup for a lame "Putting Descartes before the links" philosophy–golf joke? I promise I mean the question in earnest!)

Run a test-prep company, and a group where little kids get together to make brunch and talk philosophy. Starting a school.

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

CSS alone can't get the job done as far as moving the cart icon to the left of the menu because the cart icon and CTA are a unit and the logo and the menu is another unit structurally. To  restructure those elements into your desired layout would be fairly involved using Javascript. So yes it may be possible but not easy.

As you've discovered with CSS alone you can't get rid the space taken up by detecting the aria value. This is because you need to hide a parent element above the selector you've used and CSS doesn't have a parent selector syntax.

So we're left with a good old CSS and Javascript solution with a touch of MutationObserver thrown in.

Please see Header Cart Icon Hide When Zero.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.