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
What is best approach to create a 3-part fixed header
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Re: What is best approach to create a 3-part fixed header
A page header, layout grid and flex container can be made sticky (fixed).
Also, they can have a different layout in breakpoints.
Also, they can have a different layout in breakpoints.
Re: What is best approach to create a 3-part fixed header
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
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
Re: What is best approach to create a 3-part fixed header
Try setting a top margin equal to your header to the container below the header.
Re: What is best approach to create a 3-part fixed header
As mentioned by crispy68, you can use margin to create an offset at the top.
Re: What is best approach to create a 3-part fixed header
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.
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.
Re: What is best approach to create a 3-part fixed header
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.