How to adjust spacing between social icons in header?

Site: https://piccolo-orca-mkx8.squarespace.com/

PW: rideon

Hi there! I am trying to reduce the amount of spacing between the 2 social icons that are in the header of my site, but am not having any luck. Would anyone be able to assist? Thank you in advance!

It's in the header settings.

Go to edit a page, then edit the header and go to the desktop tab and adjust the link spacing:

Ah yes -- but I'm actually looking to keep the text links spaced as they are, and adjust the spacing only between the 2 social icons.. is there a way to do this? Thank you for your reply btw!

Fair enough! Try this Custom CSS:

.header-actions--right .header-actions-action--social .icon {
    margin-left: 1vw;
}

Adjust the vw value to your heart's content!

Ah -- that is unfortunately not working 😩

Try this instead:

.header-actions--right .header-actions-action--social .icon {
    margin-left: 1vw !important;
}

That did bring the 2 icons closer together (success!!) but it also closed up the space between the rightmost nav link and the leftmost icon. Would you happen to know how to adjust that space while still keeping the icons tight? Thank you again btw!! 

Thank you! Success!

Hey! Actually having one other issue -- perhaps related??

I am using a custom social icon/link in the nav bar, and it's showing up correctly in the desktop view but not mobile. When I click on the blank space within the mobile menu that the icon should be showing, it links to where the icon would direct to -- it's just not showing the actual icon -- it shows up as a blank space in the menu. Any thoughts? And thank you again for all of your help!

I can actually see it just fine on desktop and mobile when testing. My guess is that if you used a PNG rather than an SVG it might show up more reliably (that's been my experience). What code did you use to switch the icons?