How do I add a responsive header?

A responsive header automatically adapts to different screen sizes, helping your website look great on desktops, tablets, and mobile devices. In Website Builder, you can create a responsive header by adding a background image and adjusting how it fits within the header area.

  1. Open your website project in the Website Builder editor.
  2. Click on the header.
  3. Click the Edit header button that appears when you click on the component.
  4. In the floating menu that appears, click on Background and add an image to your header.
  5. Click Add image to select one from My images, Free from one.com, or Shutterstock.
  6. Under Fitting, select the option Fill frame proportionally.
  7. Adjust other settings such as position and opacity.
  8. Save and publish to make your changes visible on your website.

It's also possible to have a header with a solid colour or gradient, instead of an image. 

Tip: Do you need inspiration to find the right image? Check Free from one.com and search through more than 20.000 stock images.

Screenshot of the Website Builder editor showing the header with the floating menu. A red arrow points to "Fitting".

Related articles:

Was this article helpful?

Can’t find what you are looking for?

Start a chat

It's the quickest way to get in touch, every day of the year.

Start chat

Give us a call

Available on weekdays from 10am to 2pm (UTC).

Call +44 20 8106 0910