Using Source, I’m looking to have a hero banner (100vh) with Nav Bar at top and also some overlaid content in the centre.
The issue seems to be that to achieve 100vh, the Nav Bar needs to be within the Banner’s content area. If the Nav bar is outside of the banner or banner container stack then 100vh won’t work.
If inside however, the flex container is aligned to the top for the Nav Bar and there is no obvious way to then add some centred text over the banner image./
I have worked around this by putting the whole thing (in this case a Screrer stack) in Joe Workman’s Target stack and adding the centred content separately. Appears to work fine but just wondering if there is another way using either sorcerer or maybe a Source Container+ stack with background image.
Yes. In a Container with the Background set to be your image and set height to 100vh. Into the Container, add your Navbar, text over the banner image and add a Coder set to Stacks and check the Div setting. This Coder will act as a dummy and will not be visible. Then in the Container enable flex and select Space Between.
2 Likes
Thanks for that - I’ll give it a go. Forgot about the space between option!
You’ll have less control over what you can do with your hero image if it is a background, though (for instance, you won’t be able to have it in an image stack, Srcerer or other, with the controls those provide). The way I’d do it is to use Grid: I’d have a Grid with three Grid Plus Pro containers, each set to Row 1, Column 1 — so they overlap 100% — with Grid Row height set to 100vh). In the top container, I’d have the image in whatever image stack you want to use. In the stack below, I’d have the text overlay. And in the bottom stack, I’d have the nav bar. In this way the top stack would be on the bottom layer, and the nav bar in the top layer (and thus clickable). No need to use z-index if you do this, BTW.
2 Likes
Also, the Grid container that the nav bar is in doesn’t have to be 100vh — it can just be the height of the nav bar (using Source Grid’s flex controls to keep it at the top). That way you can have a clickable button or link in the text layer below, as long as it isn’t directly underneath the nav bar. This is the beauty of CSS Grid — it lets us work in three dimensions, not just two.
2 Likes
That’s a great idea. The container + stack would probably be fine for my needs here as it has 3 image breakpoints but this definitely sounds interesting. I’ll have a play with this also! Thanks for the idea.
Love seeing all the different ways this can be done. I’d probably do it this way:
- Grid Plus Pro with the grid breakpoint settings set to 1 column, rows:
auto 1fr grid height: 100vh and default alignment centre. This will give us a full height grid with 1 column and 2 rows
- In my first grid item i would add an Image Plus / Srcerer (set to cover/fill mode) to be able to use webP and have that item set to span both rows (i’d also ‘state position’ and set it to use absolute positioning with a z-index of 0 - absolute positioning means the other items will be positioned naturally and not need us to specify their position).
- Second grid item would contain the nav bar
- third grid item would contain my content (that would automatically get centred in the available space of the second row). if you need to constrain the width of the content in this grid item you could either add a container stack or i would tend to just add the class name of
source-base-width-alt to the grid item and this will constrain the width to the alt width set in the main Source stack.
3 Likes
Nice one - thank you. I’ll be spending all week playing with these ideas!