Add social icons

Not sure if I fully understand.

So you actually want the icon in the top (black) bar?

They are in the black bar. I just want to slide them over a bit to the corner of the site container rather than the corner of the site's full width.

What if you set the inner width to contained?
https://docs.generatepress.com/article/top-bar-widget-area/#adjusting-the-layout

That might work!
Where in the customizer is that setting?

https://docs.generatepress.com/article/top-bar-widget-area/#adjusting-the-layout

The top bar has a few layout settings which you can find in Customize > Layout > Top Bar.

Thanks but when I change the Top Bar Inner Width to contained the icons just disappear. I think the CSS Tom gave me above overrides this which is causing an issue.

Can you set it to contained so I can see the issue?

Might be good to remove Tom's CSS temporarily?

I've changed it back to contained and left Tom's code in place. It looks like the icons have disappeared off the page.

Hmm I see the issue.

There isn't really a great way to align one element to the center and one to the right and have them both work nicely in responsive mode unfortunately.

You can imagine how it wouldn't work on a smaller screen as the two elements would overlap.

Would you consider having one on the left and one on the right?

I'm thinking about using a page builder instead. Do you know if this is possible with Elementor?

I'm not familiar with Elementor unfortunately.

Another solution that might be worth considering is to use a hook to create 3 columns, similar to this:
https://docs.generatepress.com/article/split-header-three-sections/

But with the before header hook:
https://docs.generatepress.com/article/hooks-visual-guide/