[Resolved] Shaped header

[tenchystryder]

OK I will look at this over the weekend,

Again, thank you David

[David]

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

[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;
  }
}

[David]

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.

[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)

[tenchystryder]

Ahhh …… How to disable for mobile

[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.

[David]

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">

[tenchystryder]

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

Top job David.

[David]

Glad to be of help

[Author]

Posts