This article is about an old version of Website Builder and is no longer updated. Please check our new guides instead: Website Builder guides for the current version.
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.
- Log in to the control panel and open Website Builder.
- Go to the Components tab and drag the Background component in your page.
- Under Properties click the drop next to Background.
- Under Image click the cogwheel and select the image you want to use as header.
- 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.
- Add a component on top of the header, for example the title of your site or your logo.
- Click Save in the top left corner and Publish to make the header visible on your site.
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.