getting footer not to disappear behind the full screen background

[drotar]

extremely smart peoples,
i am designing my newest website which can be viewed at :
http://www.thomasdrotardesign.com/new/

i am working with border around the entire website as well as backstretch for my background plate. the problem i am having is getting the footer to fall behind the border but not behind the background plate. I have tried all the z-index attempts with no success. perhaps your talented eyes can tell me what I am doing wrong. Appreciated in advance for taking the time.

codepen link is: http://codepen.io/drotars/pen/zoQvPL

drotar

[Shikkediel]

Giving the “beams” a z-index: 2 seems to be working fine…

extremely smart peoples

I’ll see this as a gimmick, no person with any modesty would otherwise ever respond. Lol.

[drotar]

what line of code are you referring to please? beams?

[drotar]

never mind, got it top, bottom, left and right. thank you Shikkediel. fantastic work.

[Shikkediel]

That would be the four white strips (probably a better word) across the sides:

#top, #bottom, #left, #right

I’m assuming that’s what you meant with the border.

Edit – a late response on my side. Cheers.

[drotar]

perfect. now just trying to get the slide out menu to scroll and then i am on my way. thank you for your time, insight and effort.

[Shikkediel]

No problem. For the nav menu you’d probably need to wrap it inside another element with overflow: auto and give the menu itself absolute positioning (fixed won’t ever work). Adapting the size of the menu to fit the screen would be a more intuitive UI though. Unless that’ll make the tap area too small of course.

Edit – striken a line, fixed will work for the wrapping element as long as it is given a specific height (smaller than the screen).

[drotar]

any chance i could hire you to do this?

[Shikkediel]

I’m not in a position where I can freely freelance unfortunately. But I can help out a bit here on the forum of course. I noticed the navigation itself already has position fixed as well. So this seems to pretty much lead to what you’d be after:

.drawer-nav {
  height: calc(100% - 30px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

[Author]

Posts