Tutorials

How to insert a mobile drop down menu in DIVI – Quick and easy

The birth of WordPress

After the great impact that blogs were having, mainly Blogger after being acquired by Google in 2003, WordPress was launched that same year.

This is called a 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 birth of WordPress

The Divi plugin

As useful as WordPress can be, it is not a secret that those who have the greatest difficulty handling these types of platforms and creating web pages  are people who do not have knowledge of HTML and CSS.

Divi is a tool that comes to help, precisely, those people who have little management capacity regarding WordPress, so that they can be instructed little by little and learn to optimally handle this platform.

For those who already have knowledge of WordPress, it is a much easier option when designing the posts 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 from the desktop. This means that, in case you have a menu on the web page that you are developing, it becomes very extensive and overshadows the rest of the design that you have developed.

What is the solution?

The first thing you should ask yourself is what solution you want to adopt. When it comes to drop-down menus, it is best that the submenus are not displayed until the website visitor requests it. In this way, the user experience during the visit will be more welcoming.

If that is your intention, there are a series 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. Enter the Divi theme options, then Integration, copy and paste the following code:

<script type = »text / javascript»>

(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);

</script>

<style type = »text / css»>

# 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 {font-family: ‘ETmodules’; 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 {font-size: 16px; 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; }

</style>

The code to use

Other alternatives to optimize

Among the rest of the codes that are recommended to use, there is the one that allows you to close the menu. If the user who is visiting your website does not find what they want within the drop-down 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 drop-down menu in Divi, all you have to do is know and make the most of the best WordPress plugins to take the creation of your web pages to the top.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button