Skip to content

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

17 de April de 2021
Web pages are a window to any world. In one or several you can get any type of information thanks to the people behind each of them developing interesting content and useful. All thanks to the creation of web pages in WordPress and the help of the Divi page builder.

Blogs peaked in popularity between 2001 and 2002, reaching an all time high as updates and improvements were emerging.

The birth of WordPress

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

This is called 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 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 this type of platform and creating web pages are people who do not 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 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 you are developing, becomes very extensive and overshadows the rest of the design you have made.

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, the most It is recommended 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 number of codes that you just have to copy and paste into 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 to Integration, copy and paste the following code:

The code to use

Other alternatives to optimize

Among the rest of the codes that are recommended to use, is the one that 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 delete 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.