Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

In this article

Customizing your header's background
Designing your header
Adjusting the header settings
Hiding your header from a specific page
FAQs

Home

Creating your site

Using the Wix Harmony Editor

Structuring your site

Wix Harmony Editor: Customizing Your Site's Header

9 min

In this article

Customizing your header's background
Designing your header
Adjusting the header settings
Hiding your header from a specific page
FAQs

This article refers to the new Wix Harmony Editor, released in December 2025. Wix Harmony is not yet available to all users. If you're unsure whether you’re using Wix Harmony or the Wix Editor, view more information here.

Your site’s header sets the tone for every page, helping visitors find their way and showing off your personal style. In the Wix Harmony Editor, you can customize everything from backgrounds and borders to scroll effects, so your header looks just right.

Customizing your header's background

Choose the background that gives your header the right feel – it can be a solid color, an image or even a looping video for extra energy. Fine-tune the settings until your header feels perfectly you.

To customize the header background:

Go to your editor.
Select the header.
Click Replace Background on the action bar.
Choose the background type by clicking the relevant icon: Color , Image or Video .
Set up the header background:

Color background

Image background

Video background

Designing your header

Once you’ve chosen the perfect background, take your header’s design even further with a few creative touches. Add borders, play with corners, adjust spacing, and layer in shadows to make your header truly stand out.

To design your header:

Go to your editor.
Select the header.
Click the All design options icon on the action bar.
Choose how to design your header:
- Border : Define the borders of your header so it stands out, choosing a color, width and style.
- Corners : Make the corners of your header more square or round by dragging the slider under Radius. Click the Edit individual corners icon to design each corner separately.
- Spacing : Drag the slider to add space between the header and the edges of the screen. Click the Edit individual sides icon to only add padding to specific sides.
- Shadow : Apply inner and outer shadow to give your header an interesting 3D effect, setting the position, blurriness, color and more.

Resize your header:

Drag the handle to change the header's height. If there's a lot of blank space at the bottom of the header, double-click the handle to remove this space.

Adjusting the header settings

Choose whether your header overlaps the next section or stays separate. Overlapping creates a modern, layered effect, while keeping sections apart gives everything a crisp, classic feel. Pick the style that best fits your site’s personality.

Then, bring your header to life with a scroll effect that matches the flow of your site. Choose whether your header moves with the page, stays visible for easy access, or disappears and fades out as visitors scroll. Each effect creates a different navigation experience for your visitors.

To adjust the header settings

Go to your editor.
Click the header.
Click Header Settings on the action bar.
Click the toggle next to Overlap next section:
- Enabled: The header sits above the next section with a clear separation between them.
- Disabled: The header floats over the top of the next section, creating a layered look where content appears behind your header.
Choose a scroll effect:
- Move with page: No scroll effect is applied. When visitors scroll down the page, they also scroll away from the header (i.e. the top of the page).
  Note: This effect is disabled when setting the header to overlap with the next section.
- Stay fixed: The header stays at the top of the page as visitors scroll up and down, giving them easy access to your site's menu.
- Disappear: When visitors scroll through the page, the header gradually disappears. When visitors start scrolling up, the header appears again.
- Fade out: The header slowly fades out when your visitors scroll through the page and reappears when they start scrolling back to the top.
(Optional) Preview your page to see the effect in action.

Hiding your header from a specific page

You have the freedom to choose whether your header appears on every page of your site. By default, the header is always visible to help visitors navigate smoothly, but you can easily hide it from specific pages whenever you want.