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)”
Step 3 – Go to Divi > Theme Options and scroll to the bottom and add the following code 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 result
The final result should look like this menu here with the blue call to action button added for the “tester” link menu item.
Nice,thank you! Can you tell me how to remove the divi default blue hamburger menu?
I figured out. Tks anyway.
and for the mobile version ? this only works for desktop version
can remove the @media code or set a new rule for mobile and style separately
The button looks good – but I am having trouble changing the button color text. I have tried in the CSS to change the Hex# and also tried in the Divi Theme Customizer, but not luck. Answer Please.
Thx
you changed the background-color: #……; ?
Hi
Thanks for your code
there is a bug in link color if current item, please add this to fix :
.et-fixed-header #top-menu li.menu_button.current-menu-item>a {
color: #fff !important;
}
The code isn’t working for me.
.et_pb_menu_0_tb_header.et_pb_menu is overwriting my code and specifically the menu text color.