Bordered Header with Centered Logo

[onuro]

Category: Header Tag: Pattern Pattern Meta: is_web

Screenshot:

Markup:

<!-- wp:group {"align":"full","style":{"border":{"width":"1px"},"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"borderColor":"black","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-border-color has-black-border-color" style="border-width:1px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","iconBackgroundColorValue":"#000000","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"layout":{"selfStretch":"fit"}},"className":"is-style-default"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-default"><!-- wp:social-link {"url":"https://facebook.com/","service":"facebook"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:navigation {"ref":8728,"style":{"spacing":{"blockGap":"var:preset|spacing|60"},"typography":{"textTransform":"uppercase","letterSpacing":"4px","textDecoration":"none"}},"fontSize":"small"} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"background","width":100,"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|50","bottom":"var:preset|spacing|20","left":"var:preset|spacing|50"}}},"className":"is-style-fill","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-fill has-small-font-size"><a class="wp-block-button__link has-background-color has-black-background-color has-text-color has-background wp-element-button" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--50)">Get Started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"var:preset|color|black","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontSize":"3rem","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

@iamtakashi @alaczek

[iamtakashi]

A few thoughts:

• It looks strange to see a bordered element bumps to the browser window.
• The use of the row is too fragile because the social icons and the button need to be the same width for the menu to be centre. See the screenshot with two social links and notice the menu is off-centre.
• You need to add left padding to the menu item because it has additional letter spacing. See the strange underline.