I'd rather not include a link but this can be seen on mlftransport.dk.
I recently bought Genesis and it's amazing to work with so I figured I'd check out the support forums as well.
I'm building a website where I have a couple of elements (navbar and slider) with different coloured backgrounds flowing over the "container" and I need to make a shadow effect like you can see on the website right now.
The problem is that I'm currently using and svg element (id="shadow") absolutely positioned above the page content with pointer-events none however browser support for this is not the greatest. I'd love to hear any suggestion on how to do this differently becuase I'm drawing a blank
My html structure is like this:
<html> <body> <div class="site-container"> // normal Gensis structure with a couple of elements with different coloured backgrounds <svg id="shadow"></svg> </div> </body> </html>
Hi, as you posted this a while back, I hope you got your issue resolved. If not, please check back, and I will escalate for you. If it is resolved, please mark “resolved”, and I will close it. Thanks!
I did resolve it. For anyone else who might run into this problem I basically used a combination of overflow-y: hidden;, box-shadow and z-index as far as I remember.
I've marked the thread as resolved.
Thanks for coming back with the solution! Closing the thread now.
The topic ‘Shadow on page with overflowing backgrounds’ is closed to new replies.
Subscribe to get early access to new themes, discounts and brief updates about what's new with StudioPress!