Home
/
Ecommerce
/
How to Customize the Header of My Site

How to Customize the Header of My Site

Table of Contents

The header area is the navigation bar of your site. It is an important part that allows you to emphasize the most critical pages or sections of your website that visitors can easily access.

In this brief tutorial, you’ll learn how to customize the header.

How to Customize the Header in Website Builder

How to Customize the Header Content

  1. Go to Site Admin > Website Builder, and press the Customize button.
    Customize button in Site Admin of Website Builder
  2. Open the Content tab.
  3. Navigate to Global Sections, and click on Header.
    Header settings for Website Builder
  4. Customize various aspects of the header area, such as layout, menu type, menu alignment, logo, and favicon.
    Header customization options in Website Builder

How to Customize the Header Color

  1. Inside the dashboard, go to Website Builder.
  2. Click on Customize.
  3. Open the Content tab, and select Header.
  4. Choose one of the preset palette colors from the Header Color menu.
    Header color settings in Website Builder

NOTE! The text color will also change to match the new color since you have predefined color combinations – text and background in order to ensure accessibility and other standards where color contrast is respected. You may change the default color palette from the section Style > Colors.

How to Customize the Header Navigation Menu

  1. Log in to your Site Admin.
  2. Open the Website Builder section.
  3. Click the Customize button.
  4. Open the Navigation tab.
  5. To add a new menu item, click on the New Item tab.
    Adding an item to the header menu in Website Builder
  6. To add the item to the header, select Main Navigation in the Location drop-down menu.
    Selecting the header for a menu item location
  7. Select the item type from the Link Type menu.You can choose between Page, Label, and External Link. If the type is Page, select one of your website’s pages from the drop-down menu below.
  8. Assign the item name that will appear in the header menu.
  9. Confirm the item with the Add Item button.
    Add item button for confirming a new header menu item in Website Builder
  10. You can also delete items from the list of menu items in Main Navigation. To delete a menu item, hover over it and press the Trash can (Delete) icon. In the following pop-up window press Confirm.
    Deleting a header menu item in Website Builder

  11. You can also rearrange the order of the items. Simply, drag the chosen item and drop it in the desired position.
    Rearranging header menu items in Website Builder

How to Customize the Header in SiteGround Ecommerce

How to Customize the Header Content

  1. Log in to Site Admin of your SiteGround Ecommerce, and press Customize.
  2. Open the Content tab, navigate to Global Sections, and click on Header.

    Content tab of the SiteGround Ecommerce builder with highlighted Header section

  3. Here, you can choose the menu type, menu alignment, layout, logo and favicon.
    Header settings menu in SiteGround Ecommerce


How to Customize the Header Colors

  1. Inside the builder of your store, open the Content tab, and select Header from the Global Sections.

    Content tab of the SiteGround Ecommerce builder with highlighted Header section where you can change the header color

  2. Scroll to the Header Color section, where you can select from one of the preset colors for the header.
    Header color menu with different color palettes

NOTE! You can choose between preset color combinations for background and text colors that are optimized for better readability. The chosen color palette predefines the available color combinations. To select other combinations, change the color palette from the Style > Colors settings.

How to Customize the Header Menu

  1. Inside the builder, navigate to the Navigation tab.
  2. To add a new item, click the New Item button.
    New Item button in the Navigation menu of SiteGround Ecommerce
  3. To make sure the item is added to the header, select Main Navigation from the Add to drop-down menu.
    Main Navigation location selected to add an item to the header
  4. Select the type of item you are adding from the Link Type drop-down menu. You can choose between Page, External Link, Single Product, Category, Brand, and Label.
    Link type menu for selecting the type of the new menu item


  5. If you’ve selected Page, Product, Category, or Brand, you can choose one of the existing items in the respective link type.
  6. In Menu Item Name, type the name that will appear in the header.
  7. Finally, press Add Item.
    Add Item button to confirm adding the new header menu item


  8. To delete a link from the header, go back to the Main Navigation list, hover over the chosen item, and press the Trash icon (Delete) icon. A new window will pop up, where you must select Confirm.
    Delete icon to delete an item from the header menu


  9. You can also change the order of the header links. To do so, drag the chosen item and drop it in the preferred position.
    Moving an item to change its position in the header menu

Related Articles

Share This Article