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.

Image

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