Header Top Bar Overview (Pro)
Location: Appearance > Customize > Header& Navigation > Top Bar
To view the options available in the free version, go through this article: Header Top Bar Overview
The Zakra Pro Add-On provides you with the following additional options regarding the Header Top Bar.
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 1: Layout 1 displays the Top Bar content on a single column and allows the content to be align either Left, Right or Center.
Alignment Left: Displays the content on Left area.
Alignment Center: Displays content on Center Area.
Alignment Right: Displays content on 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 align in various styles listed below
Style 1: Displays the Column 1 content on left and Column 2 content on right.
Style 2: Displays the Column 1 and Column 2 content on center.
Style 3: Displays the Column 1 content on center with aligning each other.
The Style 3 option is shown below:
It allows displaying the Top Bar content to the entire screen width. It is shown in the image below:
It enables/disables the dropdown menu in the top bar.
It controls the visibility of Header Top Bar in 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 Top Bar not displaying on Mobile View:
It adjusts the padding spaces of the top bar area in the Left, Right, Top, and Bottom areas.
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.
Typography - It controls the top bar menu item’s Font Family, Weight, Font Size and other styling options.
Typography - It controls the top bar text Font Family, Weight, Font Size and other styling options.
Change the color of the links used in the Header Top Bar. It changes the link for normal and hover/selected state.
To view the options available in the free version, go through this article: Header Top Bar Overview
The Zakra Pro Add-On provides you with the following additional options regarding the Header Top Bar.
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 1: Layout 1 displays the Top Bar content on a single column and allows the content to be align either Left, Right or Center.
Alignment Left: Displays the content on Left area.
Alignment Center: Displays content on Center Area.
Alignment Right: Displays content on 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 align in various styles listed below
Style 1: Displays the Column 1 content on left and Column 2 content on right.
Style 2: Displays the Column 1 and Column 2 content on center.
Style 3: Displays the Column 1 content on center with 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 Header Top Bar in 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 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.
Updated on: 17/01/2024
Thank you!