A header is the uppermost section of your website. It can also be called a menu bar, or a navigation bar, as it includes links to your pages, sections, or other elements.

Click on the header section, and you'll reveal a menu for header settings. Note: If you don't see the header section, all your website pages might be hidden. Learn more 💡

  • Edit navigation

    • Add, delete, hide, rename menu items

  • Change logo

    • Enable, disable, or change the logo

    • Change the size and/or position of your logo

  • Shopping bag settings

    • Show or hide the shopping bag

    • Rename or hide the title for the shopping bag icon

    • Change the icon size

  • Style settings

    • Header background

    • Transparent header

    • Header text color

    • Header text size and font

  • Layout settings

    • Sticky header

    • Menu position

    • Menu item spacing

    • Header padding

Edit navigation

Click on the header section, and select Edit navigation. It will expand the Pages and navigation menu on the left. Here, you can add, hide, remove, reorder, or rename your menu items. Learn more 💡

Change logo

Click on the header section, and select Change logo. Here, you can show, hide, or replace the logo, as well as change its size or position. Learn more 💡

Shopping bag settings

Click on the header section, and then click on the shopping bag icon.

Here, you can do the following:

  • Show or hide the shopping bag.

  • Replace the text “Shopping bag” with your preferred title or leave it blank if you only want to display the shopping bag icon.

  • Change the size of the icon.

Style settings

Click on the header section, and then click on the pen icon.

Here, you can do the following:

  • Change the background color of your menu bar. Choose from your website's color palette or set a custom shade. Note: You can customize your website's color palette in the global styles settings as described here 💡

  • Make the header transparent.

  • Change the text color of your menu items. You can set two colors: a regular color and a hover color, i.e., when the menu link is hovered or clicked upon.

  • Change the text size and font of your menu links by clicking the button Edit text styles.

Layout settings

Click on the header section, and then click on the settings icon.

Here, you can do the following:

  • Make the header sticky. It means that the menu bar will always be pinned at the top of your website and will be visible to users even when they scroll down the page.

  • Change the menu position.

  • Change the menu item spacing.

  • Change the padding (height) of the header.


Additional resources

Did this answer your question?