Big menus are a real problem for mobile devices for Divi. But with this fix you can create a nested or collapsable mobile menu.
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi / Elementor Pro with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi with 10% discount ⇒ https://wp.discount/divi-discount/
✅ Elementor Pro ⇒ https://wp.discount/elementor-pro-dis…
✅ Hosting & Domain provider ⇒ https://wp.discount/hosting/
✅ Best caching plugin ⇒ https://wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:29 Login to WordPress
0:45 Change the menu
1:46 The problem
2:30 Fix the problem
3:53 Change the icon
Thank you for watching! 😀
📖Transscript📖
Hey guys, welcome to another Divi tutorial. I’m the WPress Doctor and today we’ll be making this unusable menu for mobiles, to this! Where all the menu items are nested. So you can just open them and close them again. I think it should be a native feature in Divi but until Divi 5.0, we have to do it ourselves. And we’re going to do that in just two minutes right now. So we login to our WordPress website. If you’re still logging in using /wp-admin/ it’s not a very safe way, so please make sure to check out my video about WordPress security. I also need to fill in a authentication code, so it’s really safe. So let’s say I want to create a very big menu then I go to ‘Appearance’ and I go to ‘Menus’.
Add some custom links in here. We’re going to repair bikes, motors, cars, even airplanes. There’s of course a lot of news around it. In the news we have tips, gossip, facts and of course fake news. Now we have created a big main menu. Because the menu right now is pretty easy. If we just go to my website. So we’re using this website. This is a very easy menu. If you want to know how I created this entire website, it is one of my YouTube builds, you can actually find it and i’ll teach you the entire way to build this entire Divi website, without any plugins. So this is really good. You can just follow it in this tutorial right here. But this menu is very easy and if I now look at my mobile screen, I go to ‘Inspector’, put it on mobile. And it is a iPhone 12 pro, then this is the menu is very very basic. So no problems here. But when I save my new menu… you will see that we have a big list. Now the problem is what you actually see here on screen, and also on a real mobile, the menu is too big for my mobile screen. And the problem with this is, when I try to scroll down, you cannot move the menu. As you can see, it it just doesn’t work. Now we can of course make the menu a little bit smaller, so we’re going to remove a couple of things inside of the menu. But what if you really have a big website with a lot of subjects like this? Then you have to do some tricks. I want to nest these main pages like: Repair, News and Contact, so you can actually click on them and then they fold open to see the rest. That would solve our problem. And to do that we need a code. So what do we do? We go to ‘Divi’ right there and we go to ‘Theme Options’.
Then we go to ‘Integration’, click on this one. Then we’re going to enable the body code make sure this is enabled. And here we are going to paste the code provided in the link. And you can find the code in the description of this video or you can just go to wpressdoctor.com/nested-menu.
and press enter. And then you see this txt file. We’re going to copy this entire thing. From the style, until the script ends, right there. Just copy it. We go back to our page. And the body code,
we’re going to paste it in. We scroll down and we press ‘Save changes’. Here we go. Now we go to the front end of our website. And there we press refresh. And now when I click on my menu, this is what happens. It’s amazing, and you can also drop it down like this. News and contact. It works! It works like a charm. Now if you want to change these icons, because now we have a plus icon, which is really not logical. Then you go into the code, and here you can see
content:/4c now the /4c is from the Elegant Themes icon library. And in google you type in Divi icon codes. And then this one is from Elegant Themes.com press on it. And when you scroll down you can see all the icons, these all the old ones, not the new ones. And in the old ones you
also see all these things. Now we now use this. You can see 4c. But actually I want to use this one: x3b. So I’m going to copy this code, just pick any one you want. Copy the code, go back to your website.
And now in our code, and just place it behind it. We only need the number and the letter. So we’re just going to remove it, and we’re going to change 4c to 3b. And then we scroll down again and we press ‘save changes’. Refresh our mobile page. And then we drop down, and now we have the beautiful icon. And that works really great just the way how it’s supposed to work. If this was useful for you, hit that like button, or you can say just thank you in the comments, I would love to read it, it keeps me going. Thank you for watching, I’ll see you in the next video and have a awesome day!
