Let’s get started and discuss each of the available settings one by one. If youre not on the customizer page, navigate to your website admin, browse to Appearance > Customize > Top Bar.
Enable Full Width Top Bar
Enabling this option would expand the top bar to eat up horizontal (x-axis) screen space. In other words, it converts the Top Bar to fill the Full Width of the page.
Just click on the checkbox next to “Enable Full Width Top Bar” to enable it.
Enable Top Bar on Mobile
If you do not want your top bar to display on mobiles for any reason, be it limited space on mobiles, or non-relevant offer, etc. You need to make sure to have the “Enable Top Bar on Mobile” unchecked, on the other hand, if you want to display the top bar on mobile, you have to make sure to have this option checked.
Show a Bottom Border as a Top Bar Separator
If you want to add a 1px separator as it helps to differentiate the top bar from the header, in order to not confuse the top bar controls with that of the header navigation, simply check the checkbox next to “Enable Top Bar Border Bottom” to enable this option.
If you want to change the color of the separator border, stay tuned to know how in a while.
Change the Top Bar Visibility Options
You can edit the visibility options for the top bar from the drop-down menu provided under the “Visibility” tab. You can choose any of the four available options.
- Show on All Devices
- To see the top bar from any device, be it a tablet, smartphone, desktop or a laptop. You will be able to see the top bar from just about all the devices.
- Hide on Mobiles
- If you want to specifically hide the top bar for mobile users. You can do so by choosing this option. It doesn’t matter which mobile the visitor may be using. But as far as the visitor is using a mobile, cell phone or smartphone. They will not be able to see the top bar.
- Hide on Tablets
- You may want to allow cell phone users to see the top bar. But you might want to not display the top bar to the tablet users. Choosing this option would hide the top bar on all kinds of tablets.
- Hide on Tablet and Mobiles
- You can choose this option if you want to hide the top bar for both the tablets and the mobiles.
Choose a Specific Top Bar Style
The top bar provides you with two options, one is a content space and other is a social link space.
You have the option to either display the social or the content space first, otherwise to center both as the last option.
The options are
- Left Content & Right Social
- The content is displayed at left
- Social icons are placed right
- Left Social & Right Content
- Social icons are placed left
- Content is placed right
- Centered Content & Social
- The content and social icons are both centered
- Content space displays first right above the social icons.
- Most suitable for mobile layouts
Change the Padding Space for the Top Bar
You can make the top bar as bigger or smaller as you prefer by changing the padding space for the top bar. You can use it to blend the top bar well with your design.
You are able to set the padding from the top, right, bottom and left respectively in pixels (px). The last chain icon links up all these input boxes together. So if you want to have the same padding from all 4 angles. Just click the icon and fill any box to automatically update all the other icons.
Change the Background Color for the Top Bar
If the current top bar background doesn’t blend well with your design or if you want to contrast to it, you can easily change the background color like so Just click on the “Select Color” button under the “Background Color” label and choose your favorite color for top bar background.
Change the Border Color for the Top Bar Separator
If you want to change the color of the top bar separator, just click over the “Select Color” button underneath the “Border Color” label and choose your desired color for the same.
Change the Text Color for the Top Bar
You have complete control over the top bar customization. The following control lets you change the text (font) color for the top bar content area. Simple click “Select Color” under the “Text Color” label and choose your desired color.
You may want to change it to blend or contrast well, or to better suit the design needs. Whatever your needs are, please just make sure the text color is visible over the background.
Change the Link Color for the Top Bar
If you have links within the top bar, you can give it a specific color of your choice. Just click over the “Select Color” button under the “Link Color” label and select your desired color.
Change the Mouse-Over Color for Links
The mouse-over color for links is usually known as the link hover. You can easily change the hover color just by clicking over the “Select Color” button under the “Link Color: Hover” label and choose your desired color.