OceanWP

OceanWP is a very popular theme for WordPress these days. It has many features, particularly for header and navigation. Also, the theme has an option for adding a top bar just above the menu and logo. The popularity of OceanWP lies in functionality and price. In the WordPress theme repository this theme can be found in the “Popular” tab on 6th place, just beneath Astra and Hello Elementor themes. You must admit, this is a very high position.

If you are beginner in the world of WordPress we have excellent video series on YouTube for you. We called it “WordPress: Feel The Platform Itself“.

What is the Top Bar?

In top bar web developers, web designers or business owners want social icons, additional information, additional menu and so one. The top bar is very common in webshops or other membership sites. For instance, if you have your own small business and you want to start a sale with a 30% discount for 2 days, the top bar is a great place to put your counter during the action. The first thing your visitor sees is the top bar. Here is the example of the top bar at the fictional web site “Green Seed Group” hero section created for my previous video tutorial.

A client’s request

Some time ago, a client of mine approached me with some Top bar-related requests. His site was built on OceanWP theme, and he wanted one short sentence with a phone icon and phone numbers on one side (inline), and on the other social icons. Just like in the picture above.

Setup social icons were simple: Dashboard → Appearance → Customize → Top Bar → Social. When you choose settings, put links don’t forget to click on Publish. The top bar is enabled by default. If it’s not, going to General options in the Top Bar end enables it. 

Now goes to a little more time-consuming solution for the left part of the request. We need a little bit of HTML code and Font Awesome icons to put in a Top Bar content. Also, we need classes to target with a few lines of CSS later on. Here is an HTML code.

<div class="my-topbar-style">
   <span class="my-topbar-paragraph">Do you have any questions?</span>
   <i class="fa fa-phone"></i>
   <a href="tel:060 12 34 567">060 12 34 567<a/>
</div>

Now, we must add our CSS code. I usually type CSS to Customize → Custom CSS/JS. But, before that, you should install a child theme. If you don’t have it, after the update of the parent theme your CSS code and other changes will be removed. Here is a useful video on How to install a Child Theme for the OceanWP theme.  

This is the CSS code which targets our classes in HTML:

/* TopBar Style */
.my-topbar-style .fa {
padding-left: 15px;
padding-right: 5px;
font-size: 14px;
}
.my-topbar-style a {
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: bold;
}
.my-topbar-style a:hover {
border: 1px solid #81d742;
color: #fff;
padding: 5px;
background-color: #81d742;
}
.my-topbar-paragraph {
color: #606060;
}
.my-topbar-paragraph:hover {
border-bottom: 1px solid #606060;
padding-bottom: 2px;
}

When you insert your code don’t forget to click on the Publish button to save your changes.

Wrap up

We are here at the end of this short tutorial for my client specific request. If you are wondering why we didn’t put another div tag instead of span because the div tag is going beneath another div. Our task was to put all elements inline. That’s all from me for today.

Let me know how you will resolve this kind of situation.