Menu icon Foundation
Extending Bkgd Color: $offcanvas-background

I love Foundation 6. (I loved 5 too). Anyway, I changed $offcanvas-background to a dark gray color. I would like that background color to extend the entire off-canvas area rather than only down to the bottom of the content. Is there a SASS parameter or CSS selector I can target to accomplish this?

Off canvasquestion

off-canvas

I love Foundation 6. (I loved 5 too). Anyway, I changed $offcanvas-background to a dark gray color. I would like that background color to extend the entire off-canvas area rather than only down to the bottom of the content. Is there a SASS parameter or CSS selector I can target to accomplish this?

Off canvasquestion
Vladimir over 3 years ago

It should have change the color of whole menu. Can we see live example, might found out where the problem is.

Jay Thatcher over 3 years ago

I can post this link for a limited time: http://thatcherdesign.com/temporary/index.html This is where I am so far in styling Foundation 6. Click the icon on either side. I have the same problem on the right and the left. Thanks Vladimir.

Vladimir over 3 years ago

@Jay Thatcher something is strange here because this should work "out of the box". I do not have time to inspect whole CSS so I will give you solution for this and you can then test it and see does it work. So add this to your CSS class .off-canvas{}

height: 100vh;

and it will stretch that background color on the whole off-canvas.
As far as I tested it works on mobile and desktop but what versions it supports I don't know exactly :)

Jay Thatcher over 3 years ago

That seems to have worked. Thanks.

Jay Thatcher over 3 years ago

Interesting, it works well unless you scroll. I'll see if I can dig deeper.

Vladimir over 3 years ago

@Jay Thatcher sorry Jay, my bad (I misunderstood what you want). Replace height: 100vh with height: 100% and it works even when you scroll...

Jay Thatcher over 3 years ago

That's it, exactly. Thank you. I really appreciate it. It may seem small, but it's the small things that make it feel polished.