Header (Navigation) Overlap with SVG Elements

[htchdth]

Hello,

I am having a problem on my site where the svg image generated by the ‘Bottom Separator’ used on layout sections overlaps my sticky header when the header and ‘angle out’ separator overlap.

Here is a link to my site: http://htchdth.staging.wpengine.com
Here is a screencast showing the issue while scrolling: https://drive.google.com/open?id=1F4f2inkFvkqIzW4UaEC1jo-z3UQyVUJi

Here is a screenshot of one of those section elements:

The only plugins installed and active are: WooCommerce, Contact Form 7.
Pro Theme Version: 2.2.5

Thanks,

Mark

[thai]

Hi There,

This issue occurs because the z-index attribute of your bar is lower than the svg element. Please change the z-index of your bar to 9999:

For more information about the z-index CSS, please take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index.

Let us know how it goes!

[htchdth]

@thai,

That worked great, thanks!

Problem Solved.

Mark

[friech]

You’re more than welcome, glad we could help.

Cheers!