There are many plugins available for WordPress site to showcase a top notification bar. You can use this feature to display a coupon code or drive traffic to a landing page. With GeneratePress theme, you do not need any third-party plugin and the theme itself supports top notification bar. In this article, let me explain how to add top bar in free GeneratePress theme and customize its appearance.
Notification Bar in GeneratePress Theme
Before proceeding further, here is how the notification bar will look on your site. You can do this with the free theme without the GP premium add-on plugin.
Step #1 – Add Top Bar Content
The free theme by default comes with a “Top Bar” widget. All you need is to add the content that you want to show in the notification area. You can add any blocks like paragraph, button, image, etc. and they will be displayed above your menu items. In our example, let us add some text and a call-to-action button.
- Go to “Appearance > Widgets” section.
- Scroll down on the widget area and find “Top Bar” widget.
- Click the + icon and type “columns” in the search box. This will filter “Columns” block and click on it to insert.
- Select 66 / 33 layout to show a text with 75% width and the button in remaining 25% width.
- Enter your text inside the first column (using Paragraph block). Here you can customize the text using block’s settings from right sidebar. However, it is a good idea to adjust typography and colors in customizer as explained in step 3.
- Similarly, add a Button block in the second column and add text in the button.
- Use the “List View” to select the parent Columns block and align the items to middle.
In case if the column’s width is not sufficient, click in the first column and change the width (for example 80%). However, make sure to adjust the second column’s width accordingly (for example 20%) so that the total width matches 100%.
Remember, the text will be anyway wrapped within the available space on mobile/tablet view. So, be precise and make it short or remove the button and use only text link. Once you are done, click the “Update” button and open any page of your site. You will find the top bar appear as shown in the below picture. Note that the appearance may vary depending upon the theme you use.
Step # 2 – Adjust Top Bar Layout
The second step is to adjust the position and layout of the top bar.
- Go to “Appearance > Customize” section to open theme’s customizer.
- Navigate to “Layout” and then to “Top Bar” section.
- Change the width and inner width to “Full” and set the alignment as “Center”. Top bar padding option will be available only with the GP Premium add-on plugin. If you have the plugin, adjust the paddings to provide sufficient space around the content. Make sure to view the top bar in desktop, tablet and mobile by choosing the corresponding view from bottom left corner.
Step #3 – Customize Colors and Fonts
Next step is to change the colors and font of the top bar’s content.
- Go to “Typography” section in the customizer, scroll down to bottom and click on “Add Typography” button.
- Type “top” in the “Target Element” box to filter and select “Top Bar” from the results.
- Select the font family, font weight, text transformation, font style and text decoration from the corresponding dropdowns. You can also adjust the font size, line height and letter spacing using the sliders. As you can see, you will get complete flexibility here instead of having fewer options in the widget block setting.
- After finishing your typography settings, go to “Colors” section in the customizer. Expand “Top Bar” section and change the background, text and link colors. From here, you can also change the button’s styles. However, that will affect globally all over your site. If you want to change link colors of the button, I recommend doing it in the widget block settings instead of doing it in customizer.
When you are done, click the “Publish” button to make the changes live. Open any of your page and the top notification bar should appear nicely.
Step #4 – Adjusting Spacing and Width of Top Bar
If you notice the padding/margin and the width of top bar’s content are not aligned properly, you can manually add CSS to adjust them (as free theme does not have Spacing module). Simply right click on the top bar area and select “Inspect” option to open developer tools section in your browser. Find the aside section and select that element. As you can see in the below screenshot, it shows block-9 as ID in my case. Click on the + icon (New Style Rule) showing on right side section under “Styles” tab and add the width and margin/padding parameters.
I add the following CSS to adjust the alignment of top bar’s content.
aside#block-9 {
width: 60%;
margin-top: 10px;
margin-bottom: -30px;
}
If it looks fine, copy the CSS code and go to “Appearance > Customize > Add CSS” section. Paste the code in the box and click “Publish” button.
Final Words
It will take less than five minutes to add and customize top bar in GeneratePress theme. You can anytime change the appearance or disable the bar instantly. That’s the power of GeneratePress theme and you can achieve any customization without third-party plugins.
Leave a Reply
Your email is safe with us.