How to change the header of my website?

Step 1: Locate the Header Customization Panel

1. On the left side panel, look for the "Header" section.

2. This section allows you to adjust layout, icons, search behavior, logo, colors, and text styles.

Step 2: Choose Header Layout and Features

• Layout Header Type: Select one of the numbered layout types (1–9) to change the basic structure of your header.

• Top Bar: Choose to display a top bar by toggling With/Without.

• Topbar Style: Select from 1–4 for top bar design variations.

• Icon Set: Pick an icon style (1–4).

• Search Type:

  • Dropdown: Opens search in a dropdown.

  • Popup: Opens a modal for search.

  • Canvas: Uses a full-width search overlay.

Step 3: Add or Replace the Logo

• Click on the Logo field to upload a new logo image.

• Adjust the Logo Width using the slider or number input.

• Toggle the White Logo switch if your design has a dark background.

Step 4: Choose Menu Behavior and Spacing

• Sticky Header: Turn this on to keep the header visible while users scroll down.

• Menu Line Height: Use the slider (1–5) to control vertical spacing in the main menu.

Step 5: Customize Header Colors

Top Section Colors:

• Background Color: The top area behind icons or social links.

• Text Color: Font color for the top section items.

Top Bar Colors:

• Background Color and Text Color for the top bar strip.

Header Colors:

• Background Color and Text Color for the main header section.

• Counter Background Color and Counter Text Color (e.g., cart badge color).

Step 6: Set Navigation and Submenu Colors

• Menu Background Color: Main navigation background.

• Menu Text Color and Hover Color: Customize normal and hover states.

• Submenu Colors:

  • Background

  • Heading

  • Text

Step 7: Preview and Save Changes

• Use the preview pane to review your design on desktop, tablet, and mobile then save the changes.