brandonhendrickson Posted November 21, 2021 Share Posted November 21, 2021 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
creedon Posted November 21, 2021 Share Posted November 21, 2021 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 best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment