In this post , we are going to give you tips on making smart Mobile Menu in Divi. This topic will cover:
- How to create a fixed mobile menu in Divi
- How to create a scrollable mobile menu in Divi
You must be aware that the menu on your mobile/tablets are not fixed as on the desktop. This means that you won’t see the menu as soon as you start scrolling down the website on a mobile. Well, this had to be an important feature as in today’s world most of the users are active on their smartphones. And who would like to go again and again on the top after scrolling down the website. So, a fixed mobile menu had to be the default setting.
For your convenience, we have made it a lot easier to use this function on your website. Just follow the steps described as below:
1.) How to create a fixed mobile menu
On the Divi sub menu, click on the Theme Options > Go to Custom CSS box on the General option > Paste the following CSS code to create a fixed mobile menu:
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed;
} }
Done !!
But wait, is your menu overcrowded ? Does your menu have a lot of pages? If yes, then read below.
If you have a lot of menu items, the menu may not perform perfectly as half of your items may get cut from the screen and to fix this problem we have come with another step in the second part. This will make your menu scrollable and solve the problem of menu items being cut out from the screen. So, lets move on to the second part which is how to create a scrollable mobile menu in Divi:
2.) How to create a Scrollable mobile menu
To do this, you have to follow the same process and reach to the custom CSS box on your divi website. Now paste the following CSS code to make the mobile menu scrollable:
overflow: scroll !important;
max-height: 83vh;
}
If you have followed the above directions to make your mobile menu, you will find that the your website’s navigation bar is quite user friendly now and sticks to the top of the screen even after scrolling down. And it is now scrollable too.
Was not it easy enough ? If you still have any questions or suggestion on your mind then kindly use the comment box just made for you. Thanks !!
To stay updated for more such helpful articles, don’t forget to subscribe us and get all the information into your inbox directly.
Very good info. Lucky me I found your website byy chance (stumbleupon).I’ve
saved as a favoirite for later!
Woah! I’m really enjoying the template/theme of this site.
It’s simple, yet effective. A lot of times it’s very haqrd to gget that “perfect balance” between superrb usabiluty and appearance.
I must say you have done a excellent job with this. In addition, the
blog loads extremely quick for me on Chrome. Superb Blog!
I like whaat you guys tend to be up too. This kind of clever work and
reporting! Keep up the fantasstic works guys I’ve aadded you guys to
blogroll.
It’s difficult to find knowledgeable people
in thiis particular subject, however, you seem like you know what you’re talking about!
Thanks
Great post. I am facing a couple of these problems.
Hello there! Quick question that’s totally off topic.
Do you know how to make your site mobile friendly?
My site looks weird when browsing from my iphone4. I’m trying to find a theme or plugin that might
be able to correct this problem. If you have
any recommendations, please share. Cheers!