Building the header with navbar and top bar
Overview
Add multi-logo (Desktop and Mobile), any icon, custom links and buttons, conditional menus, and ordering as desired. Adjust spacing between items, colors and typography for absolutely everything on both the navbar and the top bar.
Overview
Add multi-logo (Desktop and Mobile), any icon, custom links and buttons, conditional menus, and ordering as desired. Adjust spacing between items, colors and typography for absolutely everything on both the navbar and the top bar.
Header builder
From the dashboard go to Theme Settings » Header.
Top Bar
Builder
Click on the “Add New” button to add new elements to Top Bar.
» Link
» Link with icon
Section » Layout
You can adjust the layout of the Top Bar. The set layout will be applied to the section container.
» Max Width
Section » Color
The selected background color will be applied to Top Bar.
» Background Color
Link » Layout
You can adjust the layout of the Top Bar items. The set layout will be applied to links.
» Space Between
Link » Color
You can set the color and hover color for the all links of the Top Bar.
» Text Color
» Text Hover Color
Link » Typography
You can set the color and hover color for the all links of the Top Bar.
» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height
Navbar
Builder
Click on the “Add New” button to add new elements to Navbar.
» Brand (Logo and Responsive Logo)
» Menu
» Search Icon
» Cart Icon
» Button (Multiple Styles)
» Link
» Link with icon
Section » Layout
You can adjust the layout of the Navbar. The set layout will be applied to the section container.
» Max Width
Section » Color
The selected background color will be applied to Navbar.
» Background Color (Holder)
» Background Color (Sticky)
» Background Color (Dropdown)
Logo Image » Layout
Set the logo layout for desktop and mobile.
» Width Type (Auto or Custom)
» Width
» Height
Link » Layout
You can adjust the layout of the Navbar items. The set layout will be applied to links.
» Space Between
Link » Color
You can set the color and hover color for the all links of the Navbar.
» Text Color
» Text Hover Color
Link » Typography
You can set the color and hover color for the all links of the Navbar.
» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height
Button » Color
You can set the color and hover color for the all buttons of the Navbar.
» Bckground Color
» Bckground Hover Color
» Text Color
Button » Typography
You can set the background color, text color and text hover color for all buttons on the Navbar.
» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height