Creating user-friendly navigation is essential for any website, and submenus play a vital role in organizing content effectively. If you’re using Divi, one of the most versatile WordPress themes, you might want to convert your submenus into dropdown menus for a cleaner and more professional look. Dropdown menus not only enhance the visual appeal but also improve usability by decluttering your navigation bar.
In this guide, we’ll walk you through the step-by-step process of converting submenus into dropdowns in Divi. Whether you’re a beginner or an experienced web designer, these easy-to-follow instructions will help you create intuitive navigation that elevates your website’s user experience.
Set up Your Menu
Add Menu Items & Sub Menu Items
The first thing you need to do is create your menu. Add the sub items of your choice.
Add CSS Class Option
Once you’ve added the menu items, you can enable the CSS classes option by clicking on ‘Screen Options’ and enabling ‘CSS Classes’.
Add CSS Class to First-Level Menu Items Containing Sub Menu Items
Continue by adding a CSS class to the first level menu items that contain sub menu items. In this example, that means adding the CSS class to the ‘Service’ and ‘Portfolio’ menu items.
- CSS Classes: first-level
Go to Divi Theme Builder & Start Building Global Header
Go to Dashboard > Divi > Theme Builder and create header
Go to Dashboard > Divi > Theme Options > Integration.
Paste the following JavaScript code into the <head> or <body> box
<script>
(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .first-level > a');
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
Go to Dashboard > Divi > Theme Options > custom css
- Paste the following css code
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
Conclusion:
Converting submenus into dropdown menus in Divi is a straightforward process that can greatly enhance the usability and aesthetics of your website. With just a few adjustments in Divi’s settings or a touch of custom CSS, you can create a polished navigation system that makes it easier for users to explore your content.
By implementing dropdown menus, you’ll not only organize your site’s navigation but also improve overall user satisfaction. Now that you know how to make the switch, take the next step in optimizing your website for seamless browsing!
