[Resolved] Shaped header

[tenchystryder]

Morning guys

Is there a safe / correct way of adding shaped headers onto my site. (viewable desktop only)

>>Something like this<<

Not sure what exactly I want but would like to experiment to see how they look.

Thanks 🙂

[David]

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.

[tenchystryder]

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

[tenchystryder]

Something like this maybe

[David]

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.

[tenchystryder]

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

[tenchystryder]

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.

[tenchystryder]

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

[David]

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.

[tenchystryder]

Done that David.

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

[David]

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

[tenchystryder]

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.

[David]

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.

[tenchystryder]

How big does the image have to be David ?

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

[Author]

Posts