Learn how to transform the last Divi menu item into a call to action and style the current menu item

Hey! A few months ago I have learned how to style a single menu item inside the Divi menu to look like a button. What I mean is: added some borders and background color to the menu anchors.

The only problem was that often I changed the menu itens, and I needed to change the menu id all over again. Sometime I just don’t want to find anything inside my custom CSS stylesheet, so there has to be a way to style always only the last menu item inside Divi theme. And I found it!

Style the last menu item to be a call to action in Divi theme

Lets try to copy this menu look above. You’ll need to learn how to style the last menu item and the current menu item in Divi.

So, this is a simple and fast tutorial.

Lets start!

What is the following code for?

Basically 2 things:

  • Style the current page menu with a background color;
  • Add a CTA (call to action) style to the last menu item.

Paste the following code in Divi > Theme Options > Custom CSS.

Sometimes you need to put !important so the code works. Usually, I use it on the padding property.

#top-menu > li:last-child > a {
  border: 2px solid #FFC801; /* Add border to last menu item */
  padding: 8px 12px !important; /* Change last menu item background color */
}

#top-menu > li:last-child > a:hover {
  background: #FFC801; /* Change background hover animation */
  opacity: 1; /* Remove hover opacity standard animation */
}

#top-menu li.current-menu-item > a {
  color: #222222 !important; /* Change current menu text color */
  padding: 8px 12px !important; /* Change current menu item padding */
  background: #FFC801; /* Change current menu background color */
}

#top-menu li a {
margin-bottom: 5px !important; /* Play with this margin to fix menu height */
}

/* Mobile */
.et_mobile_menu > li:last-child > a {
  border: 2px solid #FFC801;
}

.et_mobile_menu > li:last-child > a:hover {
  background: #FFC801; 
  opacity: 1;
}

Remember to play with the margin and padding options until it correctly matches your site menu height. I am almost sure that you need to change those settings if your top header differs size from mine.

I must be honest. I am using this kind of menu style for my latest 3 projects. And the feedback from my clients have been awesome so far (at least none of them asked for menu changes…).

Conclusion

So, what do you think about this CSS trick? It is quite easy to follow up, but if you ever have any kind of questions, just email me using that cool button on bottom right corner that maybe I’ll create someday a tutorial of how to achieve it.

I love to help people with code. A lot that I know today is from reading other people’s posts about code, so I hope to help you with something.

See ya!