Adding a Website Top Bar (OceanWP)

Adding a Website Top Bar OceanWP
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 24/12/2023

Adding a Website Top Bar

This article will walk you through adding a website Top Bar. This tutorial is for websites using the OceanWP theme, this may also work for other websites.

A top bar hangs out at the very top of your page, above the main menu. It is a great way to have additional links to other parts of your site without having the main menu look cluttered or bulky. Often a Top Bar menu has very specific items relating to the user such as “Login” or account-related items.

Recommended Reading: Creating a Website Footer with OceanWP Theme

What to Put in a Website Top Bar?

Let’s look at where your top bar is located. As the name suggests, it is above the Header (main menu). If we look at POD’s menu, on the left-hand side we have opted for the logo. On the right is the header (main menu) and above that is the Top Bar.

Adding a Website Top Bar

When adding a Website Top Bar, you can put almost anything up there. Some of the most popular things to see here are social media links, text, and a menu.

To access your top bar settings:

  1. Navigate to your Back Office
  2. Click Appearance
  3. Click Customize
  4. Click the Top Bar option 

 Try playing around with some settings here. If you have just loaded WordPress to your server, there tends to be default text in the top bar. To remove this, you need to select Content>Content (box) and delete the text that is there as default.

Recommended Reading: Adding Social Links to a Top Bar

How to Build a Top Bar Menu

When adding a website Top Bar, you must have your pages set up in the menu editor in advance. Once your pages are set up, in the menu editor check the box “Top Bar” under Menu Settings on the right-hand side. On the left-hand side where it says Pages, select the pages you want to add. Click “Save” and refresh your website’s front end. Now you will see your top bar above your header.

Recommended Reading: Adding a Main Menu

Changing The Top Bar’s Appearance

Out of the box, your top bar might look a little boring and depending on your theme, it may not match your website’s aesthetic. Edited this by heading to the top bar’s settings. Navigate to your Top Bar settings in the Customiser and click “General”.  Here, you can change a few settings:

  • Visibility: will allow specific devices to display your top bar is shown on, such as mobile. 
  • Style: will change the positioning of the content and the social media links.
  • Padding: will give you more or less space around the top bar.
  • Colour: here you can change how the colour will look.

Changing the Top Bar’s Font

If you want to change the Top Bars font or its size, this will need to be done in a different section of the Customising sidebar. Back on the main Customisers starting menu, click “Typography”>”Top Bar”.

Here you can change the Font Family, Weight, Style and Size. 

After you have made all the necessary changes, be sure to scroll up and click Publish followed by the “X” in the top left of the sidebar.

Recommended Reading: Adding Text to a Top Bar

Web Hosting

From £19.95 /mo