|Location: Appearance → Customize → Header & Navigation → Top Bar
With the Zakra Pro, you get an additional customization option for the Header Top Bar that includes layout stylings to dropdown menu support and others. It comes with the following additional options regarding the Header Top Bar.
|| To view the options available in the free version, go through this article: ** Header Top Bar Overview**
General #
Layout #
The theme allows customizing the Top Bar with various layouts. Currently, there are two layout styles, each with multiple styles/designs for displaying the top area. The options are listed below:
- Layout – Layout 1 displays the Top Bar content on a single column and allows the content to be aligned either Left, Right, or Center.
- Alignment Left: Displays the content in the left area.
- Alignment Center: Displays content in the Center Area.
- Alignment Right: Displays content in the Right Area.
The Alignment Center option is shown in the image below:
- Layout 2: Layout 2 displays the Top Bar content on a two column and allows the content to be aligned in various styles listed below
- Style 1: Displays the Column 1 content on the left and Column 2 content on the right.
- Style 2: Displays the Column 1 and Column 2 content in the center.
- Style 3: Displays the Column 1 content in the center while aligning each other.
The Style 3 option is shown below:
Full Width #
It allows displaying the Top Bar content to the entire screen width. It is shown in the image below:
Dropdown Menu Support #
It enables/disables the dropdown menu in the top bar.
Visibility #
It controls the visibility of the Header Top Bar on different devices. You can enable/disable the top bar content on various devices. It includes the following options:
- Show on all devices: Display the Header Top Bar on all devices.
- Hide in Mobile: Only hide the Header Top Bar on Mobile devices.
- Hide in Tablet: Only hide the Header Top Bar on Tablet devices.
- Hide in Tablet and Mobile: Hide the Header Top Bar on both Tablet and Mobile devices.
Below is the image displaying the Top Bar not displaying on Mobile View:
Style #
Padding #
It adjusts the padding spaces of the top bar area in the Left, Right, Top, and Bottom areas.
Border #
Zakra theme supports displaying the border at the Bottom of the Top Bar area. This helps site visitors visualize where the top bar ends and the header area gets started. You can choose the Thickness and Color of the bottom border of the top bar.
Menu #
Typography – It controls the top bar menu item’s Font Family, Weight, Font Size, and other styling options.
Text #
Typography – It controls the top bar text Font Family, Weight, Font Size, and other styling options.
Link Color #
Change the color of the links used in the Header Top Bar. It changes the link for normal and hover/selected state.
Widget Title #
It changes the Color and Typography of the Widget Title used in the Header Top Bar.
Widget Content
It changes the Typography of the Widget Content used in the Header Top Bar.
