Move social icons in header

I'm trying to make more room for my nav items without having to move them underneath the logo.  Any ideas on a good place to move my social icons AND the code to do so? I thought about trying to move them under the donate button but I think it throws off the balance.

Site (under construction) is https://modernwave520.squarespace.com/bretts-story with password: access

Stacking the button and social icons with this Custom CSS would work:

.header-actions {
    flex-direction: column;
    row-gap: 8px;
}

Alternatively, you could try this Custom CSS to place the actions above the navigation:

.header-display-desktop {
  flex-direction: column-reverse;
  align-items: flex-end;
}
.header-title-nav-wrapper {
  flex: 1 0 100%;
  width: 100%;
}

Let me know what helps.

I'm liking the first option but I added 44px of padding to the top to align the donate button with the rest of the nav items. Not sure if that's the cleanest way to do it - my code is never clean!

Is there a way to try the second option (below) but only with the social links and leave the donate button where it was?

9 hours ago, Ziggy said:

.header-display-desktop {
  flex-direction: column-reverse;
  align-items: flex-end;
}
.header-title-nav-wrapper {
  flex: 1 0 100%;
  width: 100%;
}

Appreciate your help!!