What is best approach to create a 3-part fixed header

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
User avatar
Markus
 
 
Posts: 125
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

What is best approach to create a 3-part fixed header

Post by Markus » Fri Sep 27, 2019 8:26 pm

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:

Image

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

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: What is best approach to create a 3-part fixed header

Post by Pablo » Fri Sep 27, 2019 8:31 pm

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

User avatar
Markus
 
 
Posts: 125
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: What is best approach to create a 3-part fixed header

Post by Markus » Sun Sep 29, 2019 9:34 pm

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.

Image

Markus

User avatar
crispy68
 
 
Posts: 712
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: What is best approach to create a 3-part fixed header

Post by crispy68 » Sun Sep 29, 2019 10:41 pm

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

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: What is best approach to create a 3-part fixed header

Post by Pablo » Mon Sep 30, 2019 6:09 am

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

User avatar
Markus
 
 
Posts: 125
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: What is best approach to create a 3-part fixed header

Post by Markus » Mon Sep 30, 2019 8:19 am

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.

Image

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.

User avatar
crispy68
 
 
Posts: 712
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: What is best approach to create a 3-part fixed header

Post by crispy68 » Mon Sep 30, 2019 11:43 am

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.

Post Reply