[Resolved] Shaped header

Home Forums Support Shaped header

Viewing 10 posts - 16 through 25 (of 25 total)
  • Author
    Posts
  • #909551
    tenchystryder

    OK I will look at this over the weekend,

    Again, thank you David

    #909571
    David
    Staff
    Customer Support

    You’re welcome – let us know how you get on.

    #909576
    tenchystryder

    I may have an issue with the image as I am not very good with graphics and vectors etc. I was also looking at this code from the link above

    I am presuming either way I’ll need my own image.

    HTML

    
    
    <header>
      <h1>Header Content</h1>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon class="svg--sm" fill="white" points="0,0 30,100 65,21 90,100 100,75 100,100 0,100"/>
        <polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100" />
      </svg>
    </header>
    
    <section>
      <h1>Section Content</h1>
    </section>
    
    

    And the CSS

    
    
    header {
      position: relative;
      height: 300px;
      background-image: linear-gradient(#ff9d2f, #ff6126);
    }
    
    h1 {
      padding: 100px 0;
      font: 44px "Arial";
      text-align: center;
    }
    
    header h1 {
      color: white;
    }
    
    svg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100px;
    }
    
    @media (max-width: 699px) {
      .svg--lg {
        display: none;
      }
    }
    
    @media (min-width: 700px) {
      .svg--sm {
        display: none;
      }
    }
    
    
    #909583
    David
    Staff
    Customer Support

    Right so try this. Create a new Hook element:

    https://docs.generatepress.com/article/hooks-element-overview/

    In its content add this:

    <div class="header-shape">
    <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>

    Select the after_header hook
    Set the display rules for the entire site.
    Publish.

    Then add this CSS:

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

    Let me know.

    #909585
    tenchystryder

    David, are you a god :-0

    That works brilliantly thank you so much. Exactly what I was looking for.
    Take a look to see what you think (I will need to tinker a bit)

    #909586
    tenchystryder

    Ahhh …… How to disable for mobile

    #909593
    tenchystryder

    Actually, would be handy to know if I could disable for mobiles but it’s ok as it happens.

    Resolved and several coffee’s coming your way David.

    Massively grateful.

    Thank you David.

    #909608
    David
    Staff
    Customer Support

    Looks great 🙂 it actually looks better then when i tested it in the browser dev tools.

    For responsive settings this article will help:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    For example include one of the classes in the opening DIV of the HTML:

    <div class="header-shape hide-on-mobile">

    #909611
    tenchystryder

    Thank you. I have filed that info above in case I need it.

    Top job David.

    #909612
    David
    Staff
    Customer Support
Viewing 10 posts - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.