Header - expanding issue

I can’t expand my header to take up the entire top of the page. Even when I remove the ? forward on the URL to remove the debugger in preview, the header still stops before the end of the page.

How to fix?

Would you mind sharing a link or replicate it in the public forum app?

Screenshot below:

The header leaves about an inch of space on each side even though it looks completely expanded when building.

That is because the header element has a fixed width. To achieve the effect of having the header look like it fills the width of the page, add a stripe to the page with the header’s height that has the same background color. Responsiveness is still in the works, so you’ll have to rely on this method.

Awesome, thanks Scott

Scott - a follow up here

Stripe is what I was going for, but I’m not able to keep the contents fixed. As an example, I’d like to keep my sign up/log in buttons in the stripe so that when the user scrolls, they remain fixed on the top of the page.

Right now the buttons are in a header that disappear once user scrolls down.

Any fix?

@bradley.cumming you need to put your button elements in a Floating Group element located in the Containers section.

1 Like

Good advice, which works well if the background is a flat color.

I want to use a slightly transparent background - now when I scroll, the text in my floating group is overlapping content lower in my page.

Is it possible to lock the stripe/floating group so that scrolling happens only below these items? This would avoid any over lap.

Since your header is transparent, it may seem a bit odd that anything that is “scrolling into” the header suddenly disappears as opposed to scrolling outside of the browser window. The better experience will be gained by keeping your header opaque. By the way, this is just personal preference.

Why is the header disappeared sometimes? from preview?
When in responsive its look “ok”