By making one of your Divi menu items appear as a button it will really stand out on your navigation menu and increase your Click-Through-Rate, so if that’s something you want, use this css trick to drive people to the page you really want them to visit.

If you want to highlight an item in the main Divi navigation menu you can turn it into a button using come custom css as shown below;

Steps to add change Divi menu item into a button

Step 1 – Go to Appearance > menu and click on screen options and check the CSS classes option box
Step 2 – On the menu item you wish to add a button, add “menu-button” into the “CSS Classes (optional)”

divi menu button class

Step 3 – Go to Divi > Theme Options and scroll to the bottom and add the following code into your “Custom CSS”

[php]<!-- [et_pb_line_break_holder] -->/* Add Button to Divi menu item with class menu_button */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media only screen and ( min-width: 981px ) {<!-- [et_pb_line_break_holder] -->.menu_button a {<!-- [et_pb_line_break_holder] -->    background-color: #3399ff;<!-- [et_pb_line_break_holder] -->    padding: 5px 15px !important;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    color: #fff !important;<!-- [et_pb_line_break_holder] -->    box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et-fixed-header #top-menu .menu_button a	{<!-- [et_pb_line_break_holder] -->     color: #fff !important;<!-- [et_pb_line_break_holder] -->}}<!-- [et_pb_line_break_holder] -->[/php]
divi menu button custom css

Divi menu button result

The final result should look like this menu here with the blue call to action button added for the “tester” link menu item.

divi menu button with css
5 1 vote
Article Rating