Header expands in height covering page content

Need help Responsiveness
1

I made a gif to show you what happens. I have no idea why the buttons do not move down as I decrease the width of the page.

header-responsive-overlap

2

Hi @furnys :slight_smile: Welcome to the forum! Is that a floating header? Can you share a link to the editor?

(You can do this by going to Settings --> General --> Application Rights and choosing “Everyone can view” or edit. Then copy+pasting the editor link in this thread.)

3

Can you provide a link to the page you’re seeing the responsive issue on?

4

Floating headers float above all other content on the screen, so when you’re header content is pushed down all it does it increase the height of the floater.

Ways I’ve got around this is by shrinking content in your header as the page gets smaller.

1 Like
5

Hi @fayewatson and @virgil1, I can’t give such lax security rights to my application. Is there a more conservative way to do that?

@steven.junio91 thanks for the heads-up, I’ll investigate if it’s possible to make the header not a floating element.

6

@furnys I totally understand! :slight_smile: As @steven.junio91 said, if the header is a floating group, it will float above the page’s content and not affect the page’s responsive settings. If you change the floating group to a group, then it will resize the page when the page width decreases.

1 Like
7

Thanks @fayewatson, I’ve been finally able to get where I wanted by simply converting the header to a reusable (non floating) element.

Unfortunately, another issue has arisen (minor issue at this point), for which I’ve found more appropriate to open another thread (Convert a reusable element back to a floating group)

1 Like