Adding a top bar to your header is a great way of making an offer ‘pop’ on your website.
Why not add a global call to action, another navigation menu or anything else you can think of.
Table of contents
Open the site editor
Open the site editor by following this brief guide 🔗.
Open the header
Your site can use multiple headers if you like. So your home page could have one style, and your posts could have another for example. In this guide we’ll assume you’re using the default stacked header but the process is the same for all header styles.
In Site Editor, Go to Template Parts
Click on the header that you are using. In this example we are using the default one.
Note:
if you’re using multiple headers on your site, you can make a template part and embed that on all headers that you are using
Open List View
Top Tip! Use List View to navigate around templates in site editor. See how 🔗.
In the image below, we have highlighted what main groups are shown in the header.
Blue – This is the main parent group (the header container).
Green – This is the site identity row, your logo and tag line are in this group.
Red – This is the navigation row. Your navigation menu lives here.
We will put a top bar above the entire header element (This means that it will not be constrained by the header container padding). But you can add one in there if you wish as well.
Make sure you select the root of your document. Click ‘Template’ in the editor Breadcrumbs section.
Open the block inserter by clicking ‘ + ‘.
Search for ‘group’ and click the Group block.
Select a layout style.
- Standard group
- Row
- Stack
In this example, we will use a row.
Move the row / group / stack to the top.
Use the block settings panel to configure your row.
Settings we used in our example are:
Justification – Centered
Allow Wrap – enabled
Set default colors for that block
Padding – Level 1
Margin – 0
Block Spacing – 5
Inside that row, all we added was a paragraph block and a buttons block.
The finished piece…
Conclusion and final thoughts ðŸ’
So we have seen how to add a custom top bar. Make sure you test your layouts on as many device viewports as possible.
If you have any questions or would like to show us your work – feel free to email info@popcorntheme.com.
Block code for the above is available below – you can copy / paste into the Gutenberg code editor.
<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-secondary-color"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|60","margin":{"top":"0","bottom":"0"}}},"backgroundColor":"popcorn-tertiary-color","textColor":"popcorn-quinary-color","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center"}} -->
<div class="wp-block-group has-popcorn-quinary-color-color has-popcorn-tertiary-color-background-color has-text-color has-background has-link-color" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:paragraph -->
<p>Check out all the latest Black Friday offers available in our store.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"popcorn-secondary-color","textColor":"popcorn-tertiary-color"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-popcorn-tertiary-color-color has-popcorn-secondary-color-background-color has-text-color has-background wp-element-button"><strong>Up to 40% off</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
Leave a Reply