Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
On occasion you may have the need to make a single menu item look slightly different to the rest to draw attention to it, such as a ‘Get a Quote’ or ‘Get in Touch’ link.
We can do this quite easily with a little CSS. Rather than use the unique ID of the menu item, we are going to instead use a custom class so it can easily be changed if needed.
So let’s get cooking!
Navigate to Appearance > Menus and in the top right of the screen click on Screen Options.
Under Show Advanced Menu Properties ensure the box called CSS Classes is ticked.
Now expand the menu item you want to open in the CSS Classes (optional) field, add the class ds-custom-link and save your menu.
Next, add the following CSS to your child theme stylesheet or in the Divi theme options custom CSS box.
.ds-custom-link a {
padding: 10px !important;
background: #000;
color: #fff !important;
border: 2px solid #000;
}
.ds-custom-link a:hover {
background: #fff;
color: #000 !important;
opacity: 1 !important;
}
This is very basic CSS and will just make your link look like a button, but you can get creative with this and add in any properties you like to create your own unique link design.
And that’s it, pretty simple eh?
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Figured it out…. I needed to add the important! tag – without that nothing happened… just posting here so if anyone else follows in my footsteps!
Perfect! I was looking for something super simple and the rest of the examples out there were WAY too complex for something so basic. Thank you!
This was super helpful. Thanks for sharing!
Hi Michelle,
great tutorial – thx a lot.
I wonder if there is a possibility to move the first menu item more to the left so that there is a greater space to the second menu item as there is between the other menu items?
Thx a lot in advance – hope you are not tooo annoyed of all these questions…
Best regards
Jorg
Yes, you can target that specific menu item and just increase the right padding
Hi Michelle, I know this article is from last year but I’m hoping you will see this comment soon. This is a very cool technique indeed. Thanks for sharing. Now, I wonder if it would be possible to use this technique to add hover text over a single menu item rather than changing the way the menu item looks. In my case, one of my menus is FOTM, an acronym for Freebie Of The Month, which is obviously way too much text for a menu item. If I could add “Freebie Of The Month” as hover text when someone hovers… Read more »
Adding a tooltip to a menu item is a bit beyond the limits of the recipe. It also wouldn’t work on mobile devices so well (and perhaps desktops since nobody would likely hover over something they don’t recognize). Instead, I would recommend using a
in the menu title to make it two lines, then with a smaller font.
This works great – all my menus items are in white but the one link is surrounded by a red block and white text. The problem is the active links become red – including the one in the block which means it ‘disappears’. Trying to get its own ‘active’ color using the following CSS just doesn’t work:
.ninjazone-link a:active {color: #000000 !important; }
And yet the following DOES work:
.ninjazone-link a:hover {color: #000000 !important; }
I don’t understand what the problem might be
In the Divi Theme Customizer, remove any settings you did for menu active colors. Leave them blank and that will fix it.
Remove the :active
Why don’t you show an example of the finished item?
Because this recipe is about creating a button that works on YOUR website, and the recipe is simple enough to follow. The CSS styling you use will determine what it looks like.
How create sub menu for the custom menu?
Just like you would any other menu, in appearance > menus, drag the items you want as sub items to the right slightly and they will move under the item above
but creating menu with text module….how add sub menu for that
There are many tutorials around for HTML menus, here is one: http://mrbool.com/how-to-create-menu-with-submenu-using-css-html/26146
thank u so much Michelle.
Hi Michelle, I am finding that the css class defined for the menu affects the sub items as well. How to prevent this and let the sub items keep the default css?
You can target the submenu by adding an extra “li” in the CSS selector. For example, the main menu is “#top-menu li” and the submenu is “#top-menu li li”.
Hi Michelle,
Sorry to be a pain, but is there any code to stop the button text colour from changing on scroll when you switch between the primary and the fixed navigation?
Copy the same CSS and add a selector for: .et-fixed-header .your-css-class {target:your custom CSS;}
Shay, I tried doing what you said, but I didn’t get that to work. I would like to be able to control the stylings for the fixed navigation. Would you guys mind helping me with that? Here’s what I added to try to adjust the fixed nav stylings for the button:
.et-fixed-header .ds-custom-link a:hover {
background: #fff;
color: #E8521C !important;
text-decoration-color: #E8521C !important
}
Remove the :hover part
I have tried your code, thank you, and placed it in the secondary menu, as my client wants a “Request A Quote” button visible on every page. However The button doesn’t float in the middle of the secondary menu bar, it sticks to the bottom, and the text doesn’t float in the middle of the box, but sticks to the bottom too.
Is there some CSS I need to know to make that happen? The padding just adds more to the top and sides. I would highly appreciate it.
Its on the menu text.noxmarketing.com
The secondary menu works slightly differently, if you add the button I can take a look at helping with the positioning
I added the button on my test building site. test.noxmarketing.com This is the code so far: .ds-custom-link a { padding: 10px !important; border-radius: 15px !important; background: #e87c0c; color: #2d4573 !important; border: 2px solid #2d4573; } .ds-custom-link a:hover { background: #fff; color: #2d4573 !important; opacity: 1 !important; } adding the .ds-custom-link to the secondary menu bar. I guess I need a line of code that says something about vertically centering, but I admit to not knowing what that might be.
You can adjust the menu height in Divi > Theme Customizer
This css also defines the menu items in the lower levels…
see here: !Al5TsrUDW0JzgZ47UEEvM1IirmdTsA
I would need a live link to take a look at that and see what is happening Connie
I seriously think you read my mind. Thank you ♥
Haha I try
a screenshot of the final result would make this even better. Thank you
Very neat – thank you.
Mega cool gracias Michelle
Thanks Mario