Code by Day | Explore By Weekend

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!

18
Last updated Jan 3, 2021 @ 1:05 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
gio
gio
11 months ago

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!

gio
gio

OMG! Yes, this is it!
Thank u so much 4 your work!

Alessandro
Alessandro
8 months ago

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!!

Alessandro
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! 😊

Lily
3 months ago

Thank you! works perfect

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart