Flex layout with fixed header

Design help General
1

Hi all,

I was wondering how I can do something similar to this site: http://emperor.works/

…whereby, there is a fixed header and there are blocks below which fill the screen, currently, I am using flex and 100vh on the boxes below, however the top of the box sits behind the fixed header, rather than below it.

Hope it makes sense.

Cheers

2

LW,

Just give the nav a position of “fixed”, change the orientation from left to “top” and add a z-index of 5 or 10 to it so that everything will scroll under it.

OR… post a read-only link and I’ll take a look if you can’t get it to work.

Take care,
~B.

3

Cheers for the response, will try that.

Blown away by Webflow and community support like this is just the icing on the cake.

Thanks

1 Like
4

Thanks for the help, I did try the above but for the initial view, i.e. the first section, the content sits behind the header. What I am trying to do is load the boxes below the header initially, yet have the boxes and the header collectively fill the screen, hope that makes sense.

What I have done to highlight the issue is made the header semi transparent: Screen Shot 2016-12-04 at 2... ideally, I don’t want the blocks to sit behind the header.

5

Give me the read only link. Static images aren’t going to help me understand this.

Thank you,
~B.

6

Sure thing, let me take out some content, prob not too good to have my company info public at this point, give me 5 mins.

1 Like
7

Here we go: http://tester12356.webflow.io/

So, there is a fixed header, all I need to try and do is have the initial section not sit behind the header, rather it sits below it, or, perhaps more accurately, the header and the first section equates to 100vh.

But then as you scroll it does so behind the header, got that bit easily enough in place, just that initial section.

8

Please create a read only link as described above. I cannot see or work through your site structure in the link you’ve provided. Please use the video below to see how the link is created and shared.

Thank you,
~B.

9

Apologies Brian, here it is:

https://preview.webflow.com/preview/tester12356?preview=8bf325f666d08794faf99c682337274a

Thanks

10

OK, This is what your layout looks like on entry…

1360×638 109 KB

Is this what you’re trying to get to?

1360×638 114 KB

If this is what you want, go into your site structure, pick the “Updates Section” and put a top padding of about 104 or 105px on it and that gets this result.

~B.

11

The problem is that it will push the content down so that it doesn’t 100% fill the screen, so what I need is for the fixed header and the content below to equate to 100vh, does that make sense.

The solution above has the updates section now 104 too tall to fill the viewport, which is what you would expect.

12

You can’t see more than 100% of any device’s (Desktop, Tablet, Phone) viewport. Since you don’t want the content under the Nav, you’re going to have to find a compromise that allows your nav and content to share the space and add up to 100% (100vh) together.

~B.

13

I don’t want to see more than 100% of the device of course, I just wondered if it was possible to have a section that fills up the remainder of the space that the header took up.

I suppose I could make the header say 12vh then have the section below it 88vh…

I play around, thanks for your help though.

14

http://emperor.works/ seems to have done it, the section below the header + the header equates perfectly to 100% of the viewport height.

15

yes, because the size of the content allows it. Yours doesn’t.

16

ok, so its not possible to have:

  1. A header that is fixed
  2. A section below the header that fills the remaining space of the viewport

?

17

yes, it is, but you’ll have to cut down the size of the content to allow it to all fit in the viewport. That’s the compromise I was talking about.

18

Well, I wouldn’t call it cutting down the content, essentially, the content below is a flex layout that is super flexible in the fact that:

  1. The image for the box has tons of room and i’m not concerned about where it cuts off
  2. The box text is just one line

So “cutting down” yes, I 100% want it to, thats the whole point of this layout, want it be flexible, which is why I went with flex.

Its not a case of the content not fitting, its just that I want a fixed header + section below to collectively add up to 100vh.

19

Ok, whatever you say is fine. You’re good to go now.

20

Try creating a wrapper div and put your nav and updates section into that div.

  • Set the wrapper div as a flexbox display with 100vh height
  • Set a height for the nav (105px or so)
  • Set the top-margin for the updates section at that same 105px you used for the nav height.

This appears to work. The updates section with the nav fills the screen height without dropping any content below or overlapping. You can see in this image below. This my full screen. I scrolled down a few pixels to show that the update section ends and isn’t dropping below the screen height.

Hope this helps.
Maia

2560×1160 1.11 MB

1 Like