mportch Posted September 8, 2020 Posted September 8, 2020 Site URL: https://blackbird-trout-b2n3.squarespace.com/ Hi, How would I move this hamburger over to the right next to the cart? password: password Currently have this code in CSS: .header-burger { display: flex; }
tuanphan Posted September 8, 2020 Posted September 8, 2020 Add to Home > Design > Custom CSS @media screen and (min-width:768px) { .header-burger { order: 2; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
mportch Posted September 9, 2020 Author Posted September 9, 2020 Hi, still doesn't work. It's not a media size issue. If you add the cart it pushes the hamburger icon next to the logo.
tuanphan Posted September 9, 2020 Posted September 9, 2020 Add to Home > Design > Custom CSS .header-burger { order: 2; } .header-actions.header-actions--right { order: 3; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
mportch Posted September 10, 2020 Author Posted September 10, 2020 Great!! Is there a way of putting some space between them? And making the cart a bit smaller?
mportch Posted September 11, 2020 Author Posted September 11, 2020 @tuanphan Hi, Is it possible to make the layout look like this? (not the red guidelines)... (Swap position of cart and burger, reduce cart size, space between them, 3 lines in burger) Mobile version:
IXStudio Posted September 11, 2020 Posted September 11, 2020 Hi Follow to the code @tuanphan Use this code in Design -> Custom CSS .header-burger { order: 3 !important; } .header-actions.header-actions--right { order: 2 !important; } .header-actions--right .showOnDesktop { margin-right: 20px; } .header-display-mobile .showOnMobile{margin-right: -40px !important;} Please use the like button if it helps you! Best, Leopold mportch 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD
mportch Posted September 11, 2020 Author Posted September 11, 2020 @IXStudio Thanks!!! Do you know how to make the cart smaller and align the burger exactly with the image margin?
IXStudio Posted September 11, 2020 Posted September 11, 2020 You're welcome! Use this code in Design -> Custom CSS button.header-burger-btn.burger { padding: 0; } .header .header-actions-action--cart .icon { height: 22px; width: 22px; } Please use the like button if it helps you! Best, Leopold fhoreilly and mportch 2 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD
mportch Posted September 11, 2020 Author Posted September 11, 2020 (edited) @IXStudio Oh, sorry, any way of getting the cart number smaller too? Edited September 11, 2020 by mportch
IXStudio Posted September 11, 2020 Posted September 11, 2020 Use this code in Design -> Custom CSS .Cart-inner .icon-cart-quantity { font-size: 8px !important; /* change to anythings you want */ } Please use the like button if it helps you! Best, Leopold mportch 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD
mportch Posted September 11, 2020 Author Posted September 11, 2020 Fantastic thanks so much! I almost got it right correcting the mobile version - but still have problems moving the cart number... //HAMBURGER ALIGNMENT - MOBILE// @media screen and (max-width:767px) { .header-announcement-bar-wrapper { padding-right: 4vw !important; } .header .header-actions-action--cart .icon { height: 20px; width: 20px; padding-left: 5vw !important; } .Cart-inner .icon-cart-quantity { font-size: 8px !important; padding-left: 5vw !important; }}
IXStudio Posted September 11, 2020 Posted September 11, 2020 Use this code in Design -> Custom CSS @media screen and (max-width:460px) { .Cart-inner .icon-cart-quantity { margin-right: -15px !important; } } Sorry you need web customization service to solve like these design-code bugs. If like to continue please contact me via DM or Skype: LeopoldJobs. Best, Leopold mportch 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD
mportch Posted September 11, 2020 Author Posted September 11, 2020 Hi, I normally have the social icons ONLY showing in the navigation dropdown menu. How do I remove them from the top?
mportch Posted September 12, 2020 Author Posted September 12, 2020 It's ok - I guessed the code and removed them: .header-actions-action--social { display: none !important; }
kelseydobs Posted April 6, 2022 Posted April 6, 2022 (edited) Hi there! I am on 7.1 and used the code below to remove the hamburger menu from my mobile site - however, the cart is still in the same place. .burger-box { display: none; Is there code I can use to push the cart over to the right top corner? Thank you! Edited April 6, 2022 by kelseydobs
tuanphan Posted April 10, 2022 Posted April 10, 2022 On 4/6/2022 at 7:11 AM, kelseydobs said: Hi there! I am on 7.1 and used the code below to remove the hamburger menu from my mobile site - however, the cart is still in the same place. .burger-box { display: none; Is there code I can use to push the cart over to the right top corner? Thank you! What is your site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment