Header - Align Cart and Icons with Nav

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;
 
}

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

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!
 

@christined  Your are welcome!