Knowledge Base

Get Expert Website Hosting

Choose website reliability and expertise with SiteGround!

Home / Ecommerce / How to make the header transparent

How to make the header transparent

Summarize this article with:
Last update: Mar 10, 2026 1 min read

IMPORTANT! We currently have two builder versions: one for sites created before March 4, 2026, and another for sites created after this date. Sites still using the older builder will be automatically migrated to the newer version soon. If your site hasn’t been migrated yet, please refer to the Classic Builder section below.

To make the header transparent, follow these steps:

  1. Inside Site Tools, click on Website Builder.
    Edit Website button for accessing the Website Builder visual editor
  2. Open the Pages section from the left menu toolbar.
  3. Select the page you wish to edit from the left menu.
    NOTE: You can toggle the transparent header on or off for each page.

    Selecting a page in Website Builder where the header will be transparent
  4. Click on the Header section of the page to open the Edit Header settings.
  5. Open the Design tab.
  6. Turn the Transparent Header toggle on.
    Transparent Header toggle button for making a page header transparent

For a section with a background image, the image will extend behind the header.

For sections without a background image, the header will take on the background color of the top section. This enables different pages to have differently colored headers when the transparent header is enabled.

How to make the header transparent (Classic builder)

To make the header transparent, go to the specific page where you want the header to be transparent and click on the top section of that page.

Note: You can toggle the transparent header on or off for each page.

Next, in the Section Tools located on the right side of the section, click the topmost icon to activate the transparent header.

For a section with a background image, the image will extend behind the header.

For sections without a background image, the header will take on the background color of the top section. This enables different pages to have differently colored headers when the transparent header is enabled.

Share this article