Customize the Top Bar

Change the Top Bar section and appearance by using the Theme Options area and Menus.

Using Creativo’s Theme Options interface, you can choose to display or hide the Top Bar area by going to Creativo Options -> Top Bar -> Enable Top Bar.

If you don’t want to use a Top Bar, simply disable the Top Bar option by selecting Off under Enable Top Bar.

If you only want to disable the Top Bar for your Posts, make sure to check the Disable Top Bar for posts checkbox – this will remove the Top Bar from all your posts.

You can change what the Top Bar shows on the Left and Right sections of it, by changing the Top Bar Left Content and Top Bar Right Content options. In the Blogger template, the Left Area will show a Menu while the Right Area will show the Social Icons.

The Top Menu is created under Appearance -> Menus. The Social Icons are generated based on the info entered under Theme Options -> Social Icons.

You can also choose to display the Contact Info. The details of the Contact Info and appearances are generated based on the actual details entered under Top Bar -> Contact Info.

Using the Force Social Icons to Top Bar – Left or Right allows you to force the use of Social Icons on the Left or Right area of the Top Bar – this option is useful if you want to have a Menu, Contact Info as well as showing your Social Media icons to the right or the left of the Top Bar.

Use the Customization options to change the Background Color of your Top Bar, the Bottom Border color of the Top Bar as well as the color of the Social Icons color and opacity.

Changing the Top Menu

By default the Left Side of the Top Bar for Blogger template, is set to display the Top Menu.

The Top Menu can be created/edited by going to Appearance -> Menus. You can create your own menu or tweak the existing Top Menu. The existing Top Menu is created with 4 of the existing Post Categories: Beauty, Adventure, Fashion and Travel.

You can delete that menu and create your own. Remember that after creating your menu you must set it as Top Menu in the Display Location.

Back on Creativo Options -> Top Bar -> Top Bar Menu you can change here the actual appearance of the Top Menu:

  1. Top Menu Link Color – change the color of the Top Menu links
  2. Top Menu Link Color on Hover – change the color of the Top Menu links on hover
  3. Top Menu Separator – enable a separator between the Top Menu items
  4. Top Menu Separator Color – select the color of the Top Menu Separator
  5. Sub Menu Link Color, Sub Menu Link Color on Hover, Sub Menu Link Background Color, Sub Menu Link Background Color on Hover, Sub Menu Bottom Separator Color – use these options to customize the sub-menu items of the Top Menu, if you are using sub-menu items.

Changing the Social Icons

By default the Right section of the Blogger Top Bar will show a selection of Social Icons. These Social Icons are created based on the actual links you define for each Social Media profile under: Creativo Options -> Social Media

For each social profile that you want to use on your site, make sure you enter a link to the corresponding social network profile. Make sure you also include the http:// or https:// protocols.

For example, if you want to show the Facebook, LinkedIn, Twitter and YouTube social icons with direct links to your profiles, you will have to enter the correct links to your profile pages.

  • Facebook: https://facebook.com/rockythemes
  • Twitter: https://twitter.com/rockythemes
  • LinkedIn: https://linkedin.com/rockythemes
  • Youtube: https://www.youtube.com/channel/UCDnRDIuV3JsWYwCUUN9N2vg

Changing the Contact Info

If you choose to show the Contact Info in the Top Bar, the Left or the Right area, you can make use of the options we created to customize the actual Contact Info content and appearance.

Under Top Bar -> scroll down until you find the Contact Info options:

Enter a contact email, phone number and address if you want them to appear in the Top Bar – at least one of these options is required.

The Tap to Call Button is useful for mobile devices, a small button will appear allow users to click on it and call the Phone Number entered in the options above. Use the Tap to Call text on button to customize the actual text used for the Tap to Call button.

Choose the colors you want for the Contact Info area and also the separator used inside the Contact Info area.