Adding A Point To The Submenu of Your Divi Menu
I’ve had multiple people ask me how to do the point on top of the Divi menu as we have here on our site and on some of our child themes that we have for sale. It’s a quick snippet that adds that, and it’s a pretty interesting trick. This goes perfectly with some of the other tutorials we’ve been doing lately in our Divi Menu Module Series, so be sure to check those out and use them all together!
This is going to be a quick and easy one. Just copy the code snippet below and paste it into your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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!
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!
I’m glad you like it! Oh, I think you are referring to our other tutorial here: https://www.peeayecreative.com/how-to-add-a-highlighted-callout-in-any-wordpress-menu/
OMG! Yes, this is it!
Thank u so much 4 your work!
Hi Gio,
You are welcome, I’m so excited that you like it! I know this is something I use a lot 🙂
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!!
Thank you Alessandro! It’s people like you who make it all worthwhile!
So are you asking about the shadow only, or something else?
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! 😊
Thank you! works perfect
Great Lily, so happy!
Great job! Thank you.
You’re welcome, glad you like it!
But How to point correct position for mega menu
It can be tricky because the size can vary. But that left value can be adjusted to whatever you want, px or %
I forgot to ask. How would you center the submenu under that on any one sub menus? Thank you.
Please share the URL of the page where you want to center the submenu so that we could investigate further. 🙂
Unfortunately they have it hidden due to NDA
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.
Could you please share the URL of the page for me to investigate further?
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.
Hi Alecz,
The URL is not clear in the snapshot so could you please provide the URL so that I could investigate further?
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.
Hi Alecz,
We didn’t try that yet but we will definitely try this out and get back on this as soon as possible.
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?
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.
Thank you! Adds a little pizzazz to my menu. I appreciate you including the default menu because some of us are still using it for now.
Nice, yeah I guess there are still some using it 🙂
nice and how do i make the dropdown box like in your website menu? to bring that box in front of the header?
Hey Alex,
Could you please share the URL of the webpage so I can investigate further?
Hi Nelson, I’ve tried to figure out why my divi theme built main menu is displaying the mobile dropdown menu (on inspect) off to the right. Tablet and desktop are fine. I used all the code you provided in How To Style and Customize The Divi Menu Module Dropdown Submenu tutorial. The pointed top and rounded corners also don’t show, as per the tutorial. Is this because I’ve built in theme builder?
hello I’m excited about this opportunity and I will love to say thanks for the amazing videos you’ve been releasing
but I have a question!
How do I customize a footer that will look like the one on this blog post?
I am so glad you are enjoying our tutorials!
Our site is made in Divi, and sometimes with some CSS, so I am not sure which part you mean exactly.