Responsive header?

I’m having a responsiveness issue relative to the header.

The header IS fully responsive. When it gets narrower, at some point it gets taller, which should be fine.

What I want is for the stuff that appears below the header to start lower when the header becomes taller.

So, I designated the page as a container type Column.

There are then two sub-containers within that page container.

Header is a reusable element.
Hody is everything else.

I’m expecting the Header to always be at the top, and the Body to start below the Header.

What actually happens is both Header and Body start at the top.

I can create a top margin for the Body that is taller than the Header, but then it’s a static value, and I want it to be a dynamic value that changes as the header becomes taller or shorter.

Does anyone know how to solve this?

I assume your header is a floating group (otherwise there would be no issue…)

Aside from using conditions to change the top margin size (or using custom CSS/JavaScript to control it dynamically), the easiest way is to use a placeholder group, with the same layout settings as the header.

Yes it was.

Thank you.

Changing the reusable header element from Floating Group to Group resolved the issue.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.