Adding a top bar to header

Author:

Published:

Updated:

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.

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

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.

  1. Standard group
  2. Row
  3. 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 -->

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *