Follow us

Style a Single Divi Menu Item - Tutorial for Divi | Divi Soup

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.

Style a single Divi menu item

 

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.

Style a single Divi menu item

 

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!