www.wysiwygwebbuilder.com

Hello,

I'm looking for the best approach to create a 3-part fixed header that includes the following:

Image, Text and ResponsiveMenu.

I've tried FlexGrid, FlexContainer and PageHeader so far, but either the elements can't be made sticky, have only one row or don't break correctly when the viewport gets smaller.

This is how the area should look like:



And if the viewport is small, the three elements should be placed one below the other. The menu becomes a Hamburger menu by itself, because it is responsive.

I had the best results with a FlexContainer, but unfortunately the height of the element changes when it breaks. The following content of the website will not be "pushed away".

Do you have any suggestions as to which element would be the best to implement this?

Thank you in advance.

Markus

A page header, layout grid and flex container can be made sticky (fixed).
Also, they can have a different layout in breakpoints.

I don't want to work with fixed breakpoints in this project. The page should dynamically adapt to the view, so I chose the FlexContainer.

It is correct what you say about the header, you can set these elements fixed. But if I set the upper FlexContainer as header (fixed), then it does not displace the following FlexContainers, but covers them.

This approach is unfortunately not usable.

Here you can see it. Left is designtime, right is rendered in the Chrome browser. The browsers scrollbar ist on TOP position.



Markus

Try setting a top margin equal to your header to the container below the header.

As mentioned by crispy68, you can use margin to create an offset at the top.

Yes, sure, that's right.
But the main problem remains. The lower content is not displaced if the view is so narrow that the header is wrapped.



But anyway, I'm trying a different kind of container.

Thanks,
Markus

Btw: If I set the FlexContainer to "floating", then it displaces the content below as expected.

Your only options that I know of is either to not use a fixed header or employ breakpoints. When a header is set to fixed it's outside the container for the rest of the objects. I don't think any other container is going to act any differently.