Shaped header

Hi there,

it is possible with some custom HTML and CSS - but there are so many options and various methods we would need to see one to advise. Let me know if there is a specific one you'd like to try and ill see what i can do.

Hi David

On that link above, the first picture with the cars "Trapezoid" effect but I want the header/background to be white as on my site.
So basically put a slant on the bottom edge of my header where the primary menu is normally situated. I am also using the Max Menu Menu Pro version. Not sure if that makes a difference.

I have messed about with that code a bit from above link, but really no sure what I am doing. Tried elements and other stuff but not working for me. :-(

Something like this maybe

You're site header has changed to something different to the image above.... bit tricky to decide on how to add a slant with the centred navigation. Let me know.

Sorry David. I was trying things out last night. Now back as it was

Just one thing with the code from that link above, I managed to get a slanted header, but when you hovered over the menu, the drop down sub menus were partially hidden behind the content area for some reason.

I have left the site with the slant so you can see the sub-menu issue David.

This is the additional code in place at the moment

header {
  position: relative;
  height: 300px;
  background-image: linear-gradient(#ffffff, #ffffff);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 5vw)
  );
  /* change the calc height to a percentage height to get alternate responsive behavior*/
}

h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
  color: white;
  text-align: center;
}

section {
  margin-top: -50vw;
  background-image: linear-gradient(135deg, #777, #111);
}

Yeah... clip paths mask any elements falling outside the container.
Can you remove that CSS and flush the autoptimize cache and ill provide an alternative method.

Done that David.

Appreciate your efforts by the way. Always great work by the GP team

Try this - the top and skew properties may need tweaking.

@media (min-width: 769px) {
    .site-header {
        background-color: transparent;
        position: relative;
    
    }
    
    .site-header:before {
        content: '';
        position: absolute;
        top: -110%;
        left: 0;
        width: 100%;
        height: 200%;
        background-color: #ffffff;
        -webkit-transform: skewy(2deg);
        transform: skewy(2deg);
        z-index: -1;
    }
}

Hi David

'THAT' is awesome. With a few little tweaks here and there with padding etc I have also got the menu under the header and responsive is good too.

One last question (I hope) ....

How difficult is it to do this

I know this sounds silly but it almost replicates one of the team shirts from a few years ago and allows me to style the site around it.

Are you able to create a vector image of it and save it as an SVG? You would just need the zig zag shape - let me know then we could look at hooking that in below the header.

How big does the image have to be David ?

Awfully tricky and may take a little trial and errour, i would design it at 2400px wide by around 100px tall remember we just need the peaks, as i am assuming it will be the same color as the header background.