[Resolved] Question for David

Home Forums Support Question for David

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #928176
    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

    Sample zig zag

    #928213
    David
    Staff
    Customer Support

    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;
    }
    #928257
    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.

    #928270
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.