Many sites include a top bar above the header on their sites to keep some important links visible throughout the site. This can be icons for social media, buttons for key offers & affiliate links and so on.
In this guide, we’ll show you how to add your own header with a top bar.
Table of Contents
Launch the Site Editor
You can load the Site Editor from the Front End of your Site or from your WordPress Dashboard, we will cover both here.
Launch Site Editor from the Front End
From the front end of your site you should see the WordPress Admin Bar. Click Edit Site (1).
Launch Site Editor from the WordPress Dashboard
From the WordPress dashboard of your site click Appearance (1) > Editor (2).
The Site Editor should now be open and look like this:
Add a Top Bar to your Header
Once you have opened Site Editor, follow the steps below to add a top bar.
Open the appropriate Header for your site.
In this example we will use the default Stacked Header
Click the pen 🖊️ icon (1) to edit that template.
At the root of the template, we want to add a group block.
Click plus + (2) and select group (3)
Once you have added the group, you can now move it above the original group by clicking the up chevron (4) on the block toolbar.
If theres a gap between your top bar and the original group, you will need to remove the Margin of the original group
Select the group (5), select styles (6) and then reduce the margin (7).
In the Styles Pane (8) we can set a background color text and link colors (9) for this group. Any child blocks should inherit these colors.
While We’re there we’ll set some padding too (10).
By default, the group will usually use 800px width for its content, since this is a header element we want to widen that, so we’ll use 1200px (11) to match the rest of the header.
You can add anything you want iin this top bar, in this example I will add a navigation for site pages as well as some social links.
Add a row within your group that you created.
Click Add Block (12) and search for Row (13).
I want the child items of this row to be spaced apart which meand that there will be equal spacing between child blocks. On the left will be a navigation and on the right will be social icons. Click Change justification items (14) then click space between (15).
Now lets add the navigation, click Add Block (16) then search for Navigation (17).
By default your first nav menu will appear, lets create a new one for this though.
In the navigation block pane, click the 3 dots (18) and click Create new menu (19).