How To Add A Point On Top of a Divi Menu Submenu Dropdown Tutorial by Pee-Aye Creative

How To Add A Point On Top of The Divi Submenu Dropdown

This fun tutorial will show you how to add a point on top of the Divi menu submenu to the dropdown to add some extra styling and making it stand out!

This is going to be a quick and easy one. Just copy the code snippet below and paste it into your Divi>Theme Options>Custom CSS box.

/*add point on top of the Divi menu submenu dropdown*/
nav > ul > li > ul:after {
    position: absolute;
    left: 20%;
    margin-left: -20px;
    top: -14px;
    width: 0;
    height: 0;
    content:'';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #2cba6c;
}

That should be all you need! Now just adjust the code to fit your needs.

Change the color of the “border-bottom” to match the hex color of your submenu background color.

If you want the point to be moved over to the middle, just change the “left” to 50%.

Need More Submenu Styling?

For more submenu styling, be sure to check out our other tutorial on How To Style The Divi Submenu. It’s a really helpful guide that will go perfectly with this tutorial!

25

Last updated Jan 3, 2021 @ 1:05 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

24 Comments

  1. gio

    Good job! I like this short tutorial!
    One question: there’s a easy way to display on a menu voice a label like “new”. Similar at your site? (on divi)
    Thank u so much!

    Reply
  2. Alessandro

    You are simply amazing! Thanks for all your job with Divi and for sharing!!
    I would like so much to know how can I use it if the background of my top bar menu and the box of submenu are white (it’s the same case of this website 😅). How can I get the same result (dark shadow on hover)?
    Greetings from Italy!!

    Reply
      • Alessandro

        I think that your method works fine using a different colour for submenu background. I’ve the same background colours of your top bar (my top bar menu and submenu background are both white), but I haven’t submenu dark shadow on hover, so I can’t se the “triangle” on top because it is simply white on white. I hope that you can understand my so bad English, I’m sorry! 😊

  3. Lily

    Thank you! works perfect

    Reply
  4. Echo

    Great job! Thank you.

    Reply
  5. Echo

    I forgot to ask. How would you center the submenu under that on any one sub menus? Thank you.

    Reply
    • Hemant Gaba

      Please share the URL of the page where you want to center the submenu so that we could investigate further. 🙂

      Reply
      • Echo

        Unfortunately they have it hidden due to NDA

  6. pat

    Hi there, everything you showed worked good so far,
    However I have multiple sun menu but the CSS snippet keeps the point just at one location. not under every sub menu dropdown. How can I fix that .
    Please help! thanks.

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for me to investigate further?

      Reply
      • Alecz Eighmard Silva Deyto

        I have the same problem it just sticks to only one location check this picture for reference: https://ibb.co/Z8BZqXy. Thanks for the help.

      • Hemant Gaba

        Hi Alecz,

        The URL is not clear in the snapshot so could you please provide the URL so that I could investigate further?

  7. alecz

    Can we ahve a way to use it in the divi mega-menu where the mega-menu starts wherever the dropdown is. Thank you so much.

    Reply
    • Hemant Gaba

      Hi Alecz,

      We didn’t try that yet but we will definitely try this out and get back on this as soon as possible.

      Reply
  8. Klazina

    Is there a way to make the divi navigation menu and sub menu a different color from the regular menu? My client wants the top bar/ logo background to be white and the menu bar to be a dark blue. Is there a code for this?

    Reply
    • Hemant Gaba

      Hey Klazina,

      Yes, definitely there is a code for this but it depends upon the kind of header that you are using.

      For default header:
      #et-top-navigation{
      background-color: #000;
      }

      For theme buider header:
      .et-l–header .et_pb_menu__wrap{
      background-color: #000
      }

      You can change the color as per your liking.

      Let me know how it goes.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart