christined Posted November 22 Posted November 22 (edited) Hi, all. I have done some customization of my header with code from several threads (to add background image, move logo below nav, and to keep nav items on one line) , and I have made a bit of a mess of my social and cart icons. I would like to align both icons with the navigation to the far right, with the navigation and logo centered. [edited to add: I'd settle for Instagram on far left, and cart on far right, if that makes it easier.] Anyone know how I need to adjust my code to fix that? Thanks in advance for any help you can offer! Christine Site is https://ktraps.squarespace.com pw: katie Current using this code: /* navigation at top of header */ .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { margin-bottom : 4vw; margin-top : 0vw; order : -1; } /* header background image */ header#header { background-image: url(https://images.squarespace-cdn.com/content/67211429ed2ec000b1f4227e/9d85459d-7d4b-4817-9acc-941f20c536b7/2024-11-KTRAPS-Header1.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Nav one line */ nav.header-nav-list { flex-wrap: nowrap; } .header-title-nav-wrapper { flex: 100% !important; margin-left: 0 !important; } .header-display-desktop { flex-direction: column; justify-content: center; } Edited November 22 by christined clarification of question
don20 Posted November 23 Posted November 23 I’ve been working on customizing my site’s header—adding a background image, moving the logo below the navigation, and keeping the nav items in one line. While those changes are coming together, I’ve run into an issue with my social and cart icons—they’re looking a bit messy right now! 😅 Ideally, I’d love to align both icons with the navigation on the far right while keeping the navigation and logo centered. If that’s tricky, I’d also be okay with placing Instagram on the far left and the cart on the far right to balance things out. I’ve been trying different tweaks, but I can’t seem to get it right. Does anyone have suggestions on how to adjust my code? I’d really appreciate any help or tips you can share! 🙏 Thank you so much in advance! – Christine
Solution Squareko Posted November 23 Solution Posted November 23 Add this code into custom css and give me feedback it's working or not.I will try to provide another solution. /* Center navigation and logo, align social and cart icons */ /* Main header adjustments */ header#header { display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-image: url(https://images.squarespace-cdn.com/content/67211429ed2ec000b1f4227e/9d85459d-7d4b-4817-9acc-941f20c536b7/2024-11-KTRAPS-Header1.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 20px 0; /* Adjust padding as needed */ } /* Navigation styles */ .header-layout-branding-center-nav-center .header-title-nav-wrapper { display: flex; justify-content: center; /* Centers nav */ order: -1; /* Moves navigation to the top */ width: 100%; } .header-nav-list { display: flex; flex-wrap: nowrap; justify-content: center; /* Keeps nav items centered */ gap: 20px; /* Adds spacing between nav items */ margin: 0; } /* Align logo below navigation */ .header-display-desktop { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Social and cart icons layout */ .header-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px; } .header-actions .header-actions-action { display: flex; align-items: center; gap: 10px; /* Space between icons */ } .header-actions-action--social { justify-content: flex-start; /* Align Instagram to the far left */ } .header-actions-action--cart { justify-content: flex-end; /* Align cart to the far right */ } christined 1
christined Posted November 27 Author Posted November 27 On 11/23/2024 at 6:06 AM, Squareko said: Add this code into custom css and give me feedback it's working or not.I will try to provide another solution. @Squareko THANK YOU SO MUCH! Your code works great. Very kind and generous of you to help me!
Squareko Posted Thursday at 08:37 AM Posted Thursday at 08:37 AM (edited) @christined Your are welcome! Edited Thursday at 10:38 AM by Squareko christined 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment