Trying to reproduce this layout in foundry


Been trying for two days to reproduce this layout in Foundry.

Specifically, I want a full-page image with borders and a vertical navigation bar on the right-hand side.

Is this possible in Foundry?



You can do it very similar with the Navigation Overlay Stack → Navigation Overlay Documentation

At least that’s how I would do it.

Thanks Egomade. I tried that but couldn’t get rid of the scroll bar between the two sections of the page.

Depends how close you want to get.
A (very) quick win could be a banner stack set to “hero” and with a custom CSS for the border (I couldn’t get it working with padding, needs to investigate) and the Nav Overlay, but that doesn’t have the nice effect to the side.

CSS for the border inside the picture:

.com_elixir_stacks_foundryBanner_stack {
	outline: 50px solid white;
	outline-offset: -50px;

(There are different ways to set a border inset)

Try it here: Landing Test | Kitchensink (it’s just a quick and dirty hack)

1 Like

Thanks HeikoK,

I did try a hero banner but like you I couldn’t get the border to work. Thanks for the CSS tips.

You got closer than I did. Such a shame that the side effect couldn’t be replicated.

Very grateful.

Pretty sure, there’s also a navigation stack that does a slide in effect. And with some custom css you can get closer.

1 Like