Adding 3rd Party Shortcodes to your DonDivi Menus

Adding 3rd Party Shortcodes to your DonDivi Menus
Integrate any Shortcode into your Menu Items!

In this tutorial, we show you how to insert 3rd party plugins Shortcodes directly into the Menu Items of these DonDivi modules:

 

    Shortcodes are available in the documentation of some 3rd party plugins and add extra functionalities to your menu (language switchers, search boxes, membership login, etc.). So, make sure to check the shortcode required for your case.

    We will show you how to integrate:

    • Any Shortcode generically into both modules.
    • The specific Shortcode of the WPML plugin.

     

    To integrate the Shortcode, we will use the SUB link type included for each Menu Item in the DiviMenus Flex and DonDivi Nav Menu modules. This way, you can choose to:

    • Reveal the Shortcode when hovering/clicking on the Menu Item (default behavior of the SUB link type)
    • Show the Shortcode directly next to/in place of the Menu Item (behavior altered via CSS).

     

    If you prefer to display your Shortcodes in your Header but outside these two modules, we recommend this other tutorial:

    You might also be interested in this other tutorial: 

    You can choose from the Divi Display Conditions when to show your Menu Item (Logged In Status, User Role, Search Results, Device…).

    Select them from Menu Item > Advanced > Display Options.

    EXTRA TIP: Add Display Conditions!

    DiviMenus Flex module

    Adding 3rd party Shortcodes

    Basically, we save a Code Module with the corresponding [shortcode] for the 3rd party plugin in the Divi Library, and then select it from a Menu Item in the DiviMenus Flex module as a SUB Divi Layout.

    Add a Code module in the Divi Library with the [shortcode].
    Go to Menu Item - Link - SUB: Divi Layouts, and select that layout.
    Paste this into Menu Item - Advanced - Free-Form CSS: 
    selector ul {
padding: 0;
}
selector .dd-mi {
display: flex;
}
selector .dd-menu-flex-sub {
display: flex;
align-items: center;
position: relative;
z-index: auto;
}

/* Optional (hide menu item and show only content) */

selector .dd-item {
display: none!important;
}

    Adding WPML Shortcodes

    Basically, we save a Code Module with the corresponding [shortcode] for the WPML “language switcher” in the Divi Library, and then select it from a menu item in the DiviMenus Flex module as a SUB Divi Layout.

    Add a Code module in the Divi Library with the shortcode:
    [wpml_language_selector_widget]
    Go to Menu Item - Link - SUB: Divi Layouts, and select that layout.
    Paste this into Menu Item - Advanced - Free-Form CSS: 
    selector ul {
padding: 0;
}
selector .dd-mi {
display: flex;
}
selector .dd-menu-flex-sub {
display: flex;
align-items: center;
position: relative;
z-index: auto;
}
selector .wpml-ls-legacy-dropdown-click {
width: 100%;
}

/* Optional (hide menu item and show only content) */

selector .dd-item {
display: none!important;
}

    DonDivi Nav module

    Adding 3rd party Shortcodes

    Basically, we inject the corresponding [shortcode] for the 3rd party plugin directly into the SUB Custom Content of the Menu Item in the DonDivi Nav Menu module.

    Go to Menu Item - Link - SUB (Custom), and paste the [shortcode]
    Paste this into Menu Item - Advanced - Free-Form CSS: 
    selector ul {
padding: 0;
}
selector .et_pb_code {
margin:0!important;
}
selector .ddb-item-wrapper {
display: flex;
align-items: center;
}
selector .ddb-item-sub {
display: block;
position: relative;
z-index: auto;
}
selector .ddb-custom-menu-item {
padding: 0;
height: 100%;
justify-content: center;
}
selector .ddb-menu-item-body {
padding: 0;
}
selector a.ddb-item {
pointer-events: none;
}

/* Optional (hide menu item and show only content) */

selector .ddb-item {
display: none;
}

    Adding WPML Shortcodes

    Basically, we inject the corresponding [shortcode] for the WPML plugin directly into the SUB Custom Content of the Menu Item in the DonDivi Nav Menu module.

    Go to Menu Item - Link - SUB (Custom), and paste the shortcode:
    [wpml_language_selector_widget]
    Paste this into Menu Item - Advanced - Free-Form CSS: 
    selector ul {
padding: 0;
}
selector .et_pb_code {
margin:0!important;
}
selector .ddb-item-wrapper {
display: flex;
align-items: center;
}
selector .ddb-item-sub {
display: block;
position: relative;
z-index: auto;
}
selector .ddb-custom-menu-item {
padding: 0;
height: 100%;
justify-content: center;
}
selector .ddb-menu-item-body {
padding: 0;
}
selector a.ddb-item {
pointer-events: none;
}

/* Optional (hide menu item and show only content) */

selector .ddb-item {
display: none;
}

    🥳 That’s it!

    DonDivi Nav Menu

    DonDivi Nav Menu

    Create the perfect navigation on any screen with this powerful menu builder!

    View Demo

    👉 Subscribe to our YouTube channel

    More Videos