Header with Logo, Navigation, and Social Media Icons

[alaczek]

<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"4em","top":"2em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:2em;padding-bottom:4em"><!-- wp:site-logo {"width":60} /-->

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
<!-- wp:navigation /-->

<!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links -->
<!-- /wp:navigation --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

https://dotcompatterns.wordpress.com/?p=5585&preview=true

[onuro]

I'm thinking if the socials and the actual nav items should have more gap between, for better visual separation.

[iamtakashi]

Same as #210 for the logo. Otherwise, this will look broken in the inserter.

I'm not a big fan of the coloured social icons, especially in a header. What about making it the same as the foreground colour?

[alaczek]

I'm thinking if the socials and the actual nav items should have more gap between, for better visual separation.

I tried setting the gap in the nav menu, but it doesn't seem to have much effect.

What about making it the same as the foreground colour?

Actually, when you copy-paste the code the icons are black. Not sure how that works...

As for the logo, I'm not seeing a way to set a default image. I don't think it looks broken in the inserter though - you do see the placeholder. It only looks off in the preview. This one is especially affected because without the logo the nav moved to the left:

If this is a deal breaker then we might want to hold off on this pattern.

[iamtakashi]

My apologies for being late in responding. I've been overwhelmed with catching stuff up in Git :)

As for the logo, I'm not seeing a way to set a default image. I don't think it looks broken in the inserter though - you do see the placeholder.

Sorry, I realised that I didn't understand the logo while I was commenting on a similar thing in another thread 🙇🏻‍♂️ Ignore me, and yes, you're right. With a placeholder, it won't look broken in the inserter.