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 css into your “Custom CSS”

<!-- [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] -->

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

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close