How to Create a Diagonal Shape Background in Top Header of Divi

by | May 1, 2019 | Divi Tutorial | 8 comments

In this quick, fun tutorial I show you how to create a Diagonal Background Shape in the Top Header of Divi. It’s a very simple, sleek way to add some life to your Divi header by giving your top header menu a different look. It’s also a great way to leave some room for an overlapping logo if you have a design that suites that look. And with this method, you can also create ANY look with CSS you want to go for! It’s not limited to this diagonal line design. We’re going to create this effect:

First things first, make sure you have a top menu created and enabled by checking the “Secondary Menu” button in Appearance > Menus. Then just add and tweak the code below to your liking!

Here’s the CSS I showed in the video:

#top-header {
    background-image: linear-gradient(150deg,rgba(255,255,255,0) 55%,#8dc63f 25%);
}

Be sure to place this in the Divi Custom CSS area or ideally Child Theme Stylesheet. See tutorial below for more info on that.

Links mentioned in the video:

Sites shown in video:

Like this tutorial? You’ll love my CSS Course.

Use coupon code “CSS30” for $30 OFF at checkout!

8 Comments

    • Josh
      Josh on May 2, 2019 at 3:16 pm

      Too kind, Diana. Too kind!

      Reply
  2. Thomas
    Thomas on May 16, 2019 at 3:32 pm

    Hi Josh. This is very cool. Thank you!!

    When I scroll the page the top (secondary) menu takes on a slight shadow effect. How can I prevent or modify this effect?

    Thanks for all your help with us newbies…

    Reply
    • Josh
      Josh on May 16, 2019 at 5:15 pm

      Thanks Thomas. You can hide that with this CSS:

      #main-header.et-fixed-header {
    -webkit-box-shadow: 0 0 0px rgba(0,0,0,.1)!important;
    -moz-box-shadow: 0 0 0px rgba(0,0,0,.1)!important;
    box-shadow: 0 0 0px rgba(0,0,0,.1)!important;
}

      This is one reason I created and highly recommend my Divi/CSS Course! If interested, use coupon code CSS30 for a discount 🙂 Would love to have you in the course as it’ll help you out with these type of customizations!

      Reply
  3. mrsmart1982
    mrsmart1982 on May 27, 2019 at 12:13 pm

    Hi Josh,
    Thanks for all your great work.I love your tutorials and I this one is really good.

    I want to ask that is there any way to give border bottom to only gradient area in top header so that half of the menu is differentiated even if top and main header has same backgrounds.

    Reply
    • Josh
      Josh on June 8, 2019 at 7:26 pm

      mmm honesty not sure. There may be a way to adjust the width size for a border bottom. Probably recommend checking w3 schools for that.

      Reply
  4. Josiah
    Josiah on October 12, 2020 at 2:37 pm

    Hey Josh, do you know how I would apply this same effect to the main header instead of the secondary header?

    Reply
    • Josh
      Josh on October 12, 2020 at 2:42 pm

      You can just replace the ID with the #main-header ID and that should do it 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *