Hi all,
I might miss something, but I fail to build a very basic home page (at least it looks basic to me).
It should have a background picture, which is always the full width of the browser window independent of device or browser. As an example this can be achieved by the Image Stack and selecting “Upscale to 100% Width” for the Image Sizing drop down in the Advanced section of this stack. This image then behaves exactly as I want it to behave.
I now want to put a vertical menu on top of this image (5 items, where one of them has 3 sub items). So my home page has only this graphic and the menu overlaid to this graphic (the Nav Overlay for example doesn’t work because there is no way to have it always open).
And this is where I fail.
I have tried the Overlay Stack, but I cannot make the overlaying part transparent to see the picture shine through. I have tried the List Group as well as the Vertical Nav within the Overlay Stack. The used colors for the individual items don’t even have an opacity slider like the background has.
I have tried the Banner Stack, but there is no banner pairing option like Nav Bar Pro has it, which does allow to overlay AND transparency. So I again I fail to overlay the menu (List Group or Vertical Nav or whatever) over the picture.
I have tried to use a Container Stack and use the my picture as background image, but I can’t figure out, how to configure it in a way, that it always has the full width of the browser window. It jumps at the mobile/tablet/desktop breakpoints and does not always fill the width, no matter whether I use Fit or Fill for it. And the container has another obvious drawback, it is only as large as it’s contents, so if there is only a small menu with three or four items in there, it grows and shrinks with the menu, so I don’t see the full image. I can use a margin stack to just make it large enough, but that has some other strange side effects.
If I give up control of the image size, I can make it happen (using a banner for example. where the image height is cut), but I want to the image to be fully visible (so I might need to scroll up and down to see the full picture based on the width of the browser window), but it should always show the full picture as background. And it needs to have the menu on top of it.
I’m pretty sure I can code this with some effort in HTML/CSS myself, but for manageability I obviously want to do it within Rapidweaver/Foundry and not just put a simple HTML Stack on the page and program everything myself
Any ideas or pointers?
Thanks
Bogomir