Start your new blog today
Subscribe and get your FREE Blogging Blastoff Email Course

How to Create A Simple Hello Bar In GeneratePress

3 minute read

WordPress Tutorials

Disclosure: This article contains affiliate links. When you click these links and make a purchase, I may get a small commission. It won’t cost you anything, but it helps me to run this site.  Find out more.

In today’s post, I want to show you how to create a simple hello bar in WordPress using the amazing GeneratePress theme. You could use the space for a site-wide call to action.

This hello bar is unobtrusive but does a great job of alerting your readers to your offer.

The great news is that you can do this all inside GeneratePress without having to install an additional plugin to do it. Plus, you can do it with just the free version of GeneratePress. If you have GeneratePress premium, then you have a few more styling options at your fingertips.

Here is how it could look:

The top bar does not stick at the top as you scroll, but if you want to do that, you could add some simple CSS which I will show you how to do lower down this post.

Step 1 – Add widgets to the top bar

  1. Pop over to Appearance->Widgets
  2. Drag a text widget into the Topbar widget area
drag a widget into the top bar widget area
  1. Type your call to action text, adding a link.
  2. Click the Save button

Now when you view the page the text you entered will appear in the top bar area.

generate hello bar showing at the top

Step 2 – Style the top bar

Useful to know: if GeneratePress detects that there is content present in the Top Bar it will show it automatically. If you remove all the widgets, it will hide it again.

Now lets style it.

Changing the appearance with GeneratePress – free version.

  1. Go to Appearance->Customize
  2. Choose Layout
  3. Choose Top Bar

You can use the options to change the alignment and whether the top bar is full width.

Changing colours with GeneratePress Premium

If you have the premium version of GeneratePress, then you have more freedom to change the colour scheme of the top bar.

Before you start, make sure you have enabled the Colours and the Spacing modules in the GeneratePress settings.

You can check that by going to Appearance->GeneratePress and then checking that the modules are activated.

Enable the color module in GeneratePress

Now we are sure the colours module is enabled. Go back to the customiser and to change the colours.

  1. Goto Appearance->Customise
  2. Click Colours
  3. Click Top Bar
  4. Select the colours you prefer for the background, text and links
Top bar colours with GeneratePress Premium

With GeneratePress Premium you can also control the spacing around the top bar by selecting Layout->Top Bar.

top bar spacing in generatepress

Bonus: How to make the GeneratePress top bar stick to the top

You can make the top bar stick to the top of your page. This is a great idea if you want your call to action visible all the time.

To make this happen all you need to do is add a snippet of CSS.

  1. Go to Appearance->Customise
  2. Click on Additional CSS
  3. Enter this CSS code into the box
.top-bar {
	position: sticky;
	top: 0;
	z-index: 99;
}
  1. Click Publish

Wrapping up

In this article, I have shown you how to add a top bar to your GeneratePress themed website (also known as a ‘hello bar’).

All you really need to do is add a widget into the top bar widget area, and the top bar magically appears on your website.

You can style your top bar in the WordPress customiser, and if you have GeneratePress premium, you have a few more styling options.

This post was proofread by Grammarly

Related posts

Did you love this article? Please share it if you did!