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!

17

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Other Code Snippets

Leave A Response!

Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
gio
gio
4 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
2 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! 😊

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart