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.
The topic ‘Shadow on page with overflowing backgrounds’ is closed to new replies.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.