Change the order of the cart in the header?

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!)

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.