[Resolved] Question for David

[tenchystryder]

Hi David (and team)

A few weeks ago you help me create a zig zag effect on my site.

We used this hook in elements (after header)

<div class="header-shape hide-on-mobile">
<svg width="100%" height="100%" viewBox="0 0 2400 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <path d="M0,0L427,100L794,50L1124,100L1272,61L1388,100L1520,56L1777,100L1926,50L2108,100L2400,0L0,0Z" style="fill:white;stroke:white;stroke-width:1px;"/>
</svg>
</div>

And this snippets in additional css

.header-shape {
    margin-top: -1px;
	  margin-bottom: 40px;
}

This works great. If you remember you mentioned it looked better on the site than your test environment.

What I would like to try now is to create the same effect above header but below top bar with colour #2f5377 to create a ‘tear effect’ across the page in transparent (or white) where the menu and logo is.

Something like this

[David]

Hi there,

same process with a new hook but use the before_header hook and a flipped version of the SVG – so the code would be:

<div class="header-shape-above hide-on-mobile"> <<svg width="100%" height="100%" viewBox="0 0 10000 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform="matrix(4.16667,0,0,4.16667,0,0)">
        <g transform="matrix(1,0,0,-1,0,100)">
            <path d="M0,0L427,100L794,50L1124,100L1272,61L1388,100L1520,56L1777,100L1926,50L2108,100L2400,0L0,0Z" style="fill:white;stroke:white;stroke-width:1px;"/>
        </g>
    </g>
</svg></div>

Then this CSS to close the gap:

.header-shape-above {
	margin-bottom: -8px;
}

[tenchystryder]

Yeah it was the flipping SVG code I couldn’t figure out.(see what I did there ha ha)

I’ve had to set that -8px down to -5px as it was flattening out the shape at the edges and also increase nav drop point in layout to 650 to stop the white of the menu and logo over lapping.

Little bit of adjustment on the top bar and header padding as well and all good.

Perfect as always. Thank you David.

[David]

Glad to be of help

[Author]

Posts