[Resolved] Shaped header

Home Forums Support Shaped header

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #908472
    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 πŸ™‚

    #908620
    David
    Staff
    Customer Support

    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.

    #909062
    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. πŸ™

    #909064
    tenchystryder

    Something like this maybe

    Trapezoid Header

    #909193
    David
    Staff
    Customer Support

    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.

    #909327
    tenchystryder

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

    #909335
    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.

    #909339
    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);
    }
    #909370
    David
    Staff
    Customer Support

    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.

    #909380
    tenchystryder

    Done that David.

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

    #909385
    David
    Staff
    Customer Support

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

    staggered

    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.

    shirt

    #909478
    David
    Staff
    Customer Support

    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.

    #909502
    tenchystryder

    How big does the image have to be David ?

    #909517
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.