Email-Icon Created with Sketch. Group 3 Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. Control-panel-Icon Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. icon-slider-next Created with Sketch. icon-slider-prev Created with Sketch. Webmail-icon Created with Sketch. heart Created with Sketch. Open-24-7 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

How do I add a responsive header?

A responsive header adjusts its size, depending on the size of the screen. In Website Builder you can use the background component to add a responsive header.

By default a background component will be hidden on smaller screens, unless it contains other components like text or images. To keep the header visible on mobile devices, make sure to add content on top of it.

Tip: If you don't want to add any text, but still want your header visible on small screens, add a text component only containing enters and spaces.
  1. Log in to the control panel and open Website Builder.
  2. Go to the Components tab and drag the Background component in your page.
  3. Under Properties click the drop next to Background.
  4. Under Image click the cogwheel and select the image you want to use as header.
  5. Adjust the size and placement of the background component en stretch it over the width of the page, by clicking the stretch button in the top right corner.
  6. Add a component on top of the header, for example the title of your site or your logo.
  7. Click Save in the top left corner and Publish to make the header visible on your site.

Use the background component to add a responsive header
Tip: Check how your site looks on smaller screens under Preview. You can switch between desktop and mobile and flip between horizontal and vertical view.

Related articles:

How do I insert an image?
How do I insert a slideshow?