Banner: How to set a header at the bottom of the banner

Foundry
1

Hi,

I want to use the banner and place a header stack inside of it. But as this stack hides some parts pf the image if the stack is placed in the middle of the banner stack, I need to have it placed at the bottom of the banner. And it needs to stay relevant to the banner’s bottom edge, even if the page is resized.

How is this possibe?

Thank you

Jan

2

@Fuellemann

This is easily achieved with a custom CSS snippet. Add this to the page or project level (you decide which is more appropriate) CSS code container:-

.banner_content {
    vertical-align: bottom !important;
}

Enjoy

1 Like
3

No need to use CSS. Always give it a try with the Foundry tools at hand… I would use the Margins stack within a flexible height banner. Here’s a quick example file: http://d.pr/f/1hwq5

3 Likes
4

Ah, so in that example you are actually using the margin values in the margin stack to control the (flexible) height of the banner image. Thats really clever!

5

Yeah, the Margins stack is one of the most versatile and powerful stacks in Foundry, IMHO. And it is super simple.

6

To reopen the question: This does not work with a hero banner, as I do not know the size it will have. How can I set a stack to be fixed at the bottom of a hero banner?

7

The best solution I know of is SectionsPro from BWD and there is a specific Sections stack called SectionsFix which was developed to do exactly this (and more). Making content stick to the bottom of web elements can be challenging.

3 Likes
8

You are correct, that is not a possibility with the hero setting in the Banner stack, due to the variable nature of the banner’s height in that scenario.