Pro header full height with 3 bars

[Deesign]

Hi there,

How do we make a header created in Pro that has 3 bars display as full height on all screen sizes?

Thank you,
Dee

[friech]

Hi Dee,

Thank you for writing in, please follow this tutorial Fullscreen Hero with Sticky Navigation

Let us know if something is not clear in the tutorial.
Cheers!

[Deesign]

Thank you @friech - I followed the tutorial to the T but still can’t make it work exactly right.
In the video there are only 2 bars, in our set up there are 3 bars.

One top bar 60px the main image and a 120px bottom bar. I combined the height of both the top and bottom bars and added the calc to the middle image calc(100vh-180px) but the results are not full screen. 100vh works for the middle image but when we add the calcuation all 3 end up taking up only a third of the screen.

What am I missing?

Thank you
Dee

[tristup]

Hi Dee,

You can enable the Sticky option for the *first bar too, which makes that bar sticky and stick to the top along with the other one.

If you enable the sticky option, it looks like the following screenshot.

If that is not the case and you are trying to point out something else, please provide any screenshot or any video that helps us to recognize what exactly you are trying to achieve.

Thanks

[Deesign]

Thank you @tristup

That’s not exactly what we’re looking for - we have found the sticky element, we only need bar 3 to be sticky. The goal is for the 3 bars in the Pro header to be full height of all screens.

We followed the calc instructions in the tutorial above and it doesn’t seem to work as soon as I add any px unit to the calc(100vh-180px) then the whole middle bar - main image - becomes 1/3 of the size of the screen not 100% (minus the top and bottom bars) If I remove the - from the setting and only have calc(100vh) then the main image is full height but both the top and bottom bars are cut off.

[friech]

Hi Dee,

I’m glad that tutorial get you started with the Header. The issue with the second bar is you did not put space between 100vh and 180px in the calc() function. It should be calc(100vh - 180px)

Please note that if you’re login there is that 32px black admin bar, that is going to mess up the calculation of the header a bit (push the bar 3). But on a logout user, that 3 bar will look perfectly full-screen.

Cheers,

[Deesign]

Thank you @friech!

two little spaces make all the difference in the world

[friech]

Glad we could help, Cheers!