Step 1: First add the class dt-menu-cta to the link that is to be displayed as a button under Appearance > Menus.

Tip: If you don’t see the box CSS Classes (Optional), you’ll need to enable it in WordPress first. To do so, click Screen Options at the top right of the menu settings and select CSS Classes under Show advanced menu properties. Then you should see the box.

Step 2: Now paste the following code into the stylesheet of your child theme or into the Additional CSS section in the Divi Theme Customizer. You can now customize your button as well as your menu height in CSS.

/* Button Styling */
.dt-menu-cta a, .et-fixed-header #top-menu .dt-menu-cta a {
    background: #2ACCB3; /* Change the button background color here */
    border-radius:25px 25px 25px 25px; /* Change the radius here or remove the line completely for a square button */
    color:#fff !important;
    padding:12px 20px !important; /* Change button padding here */

@media (min-width:981px) {
    /* Resets the top and bottom spacing of the primary menu */
    .et_header_style_left #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a, 
    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a,
    .et_header_style_split #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a {
        padding-bottom:0 !important;
    /* Corrects the position of the search icon */
    #et_search_icon:before {
    /* Positions the menu links vertically centered */
    .et_header_style_left #et-top-navigation, 
    .et_header_style_split #et-top-navigation {
        display: flex;
        align-items: center;
    /* Change menu height here */
    .et_header_style_left #et-top-navigation, 
    .et_header_style_split #et-top-navigation {
        padding:25px 0 !important;
    /* Change menu height for fixed navigation menu here (menu height when scrolling) */
    .et_header_style_left .et-fixed-header #et-top-navigation {
        padding:15px 0 !important;

Dir hat der Beitrag gefallen? Dann teile ihn gerne!