The birth of WordPress
After the great impact that blogs were having, mainly Blogger after having been acquired by Google In 2003, WordPress was launched in the same year.
This is named as content manager, focused on the creation and design of web pages. To this day, it is still considered a fundamental tool for this type of work, especially in the commercial field.
The Divi plugin
As useful as WordPress can be, it's no secret that those who have the most difficulty managing this type of platform and creating web pages are people who don't have knowledge of HTML and CSS.
Divi is a tool that comes to help, precisely, to those people who have little management capacity in terms of WordPress, so that they can be instructed little by little and learn to optimally manage this platform.
For those who already have knowledge of WordPress, it is a much easier option when designing the entries on your blog or website.
Dropdown menu
When you enter Divi from your mobile phone, this platform, as well as the vast majority of web pages, offer a different view than the desktop one. This means that, in case you have a menu on the web page you are developing, it becomes very extensive and overshadows the rest of the design that you have elaborated.
What is the solution?
The first thing you should ask yourself is what solution you want to adopt. When it comes to dropdown menus, the most It is recommended that the submenus are not displayed until the web page visitor requests it. In this way, the user experience during the visit will be more welcoming.
If that is your intention, there are a number of codes that you just have to copy and paste in Divi to solve this problem by providing a much more pleasant interface for those who may be visiting your website.
The code to use
The coding required to modify the way the menu is displayed is somewhat extensive, but effective. Sign in at Divi theme options, then to Integration, copy and paste the following code:
(function($) {
function setup_collapsible_submenus() {
var $ menu = $ ('# mobile_menu'),
top_level_link = ‘#mobile_menu.menu-item-has-children > a’;
$menu.find(‘a’).each(function() {
$(this).off(‘click’);
if ($(this).is(top_level_link)) {
$(this).attr(‘href’, ‘#’);
}
if (! $(this).siblings(‘.sub-menu’).length) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} Else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).parent().toggleClass(‘visible’);
});
}
});
}
$ (window) .load (function () {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
#main-header.et_mobile_menu.menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header.et_mobile_menu.menu-item-has-children > a:after { text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header.et_mobile_menu.menu-item-has-children > a:after { content: ‘4c’; top: 13px; right: 10px; }
#main-header.et_mobile_menu.menu-item-has-children.visible > a:after { content: ‘4d’; }
#main-header.et_mobile_menu ul.sub-menu { display: none!important; visibility: hidden!important; transition: all 1.5s ease-in-out;}
#main-header.et_mobile_menu.visible > ul.sub-menu { display: block!important; visibility: visible!important; }
Other alternatives to optimize
Among the rest of the codes that are recommended to use, is the one that allows to close the menu. If the user who is visiting your web page does not find what they want within the dropdown menu and submenus, they should be able to close it.
Otherwise, the menu display may obscure the view of the rest of the web page. And taking into account that you are browsing from your mobile phone, it is most likely that you are obscuring the entire page. If you want to remove it, proceed to copy and paste the following code:
/* Change menu to X when open */
.mobile_nav.opened.mobile_menu_bar:before {
content: ‘4d’;
}
Now that you know how to insert a mobile dropdown menu in Divi, all you have to do is learn and make the most of the best WordPress plugins to take the creation of your web pages to the top.
