Select Page

All sites that are on mobile have mobile navigation equipped. But what if you encounter some problems regarding this navigation involving the menu items stacking with each other and covering the entire screen.

This is not a rare issue. Almost all website owners have encountered this problem. Before we talk about the solution, let’s talk fist,

Why Bother with Fixing the Mobile Navigation Problem on your Website?

Along with the creation of smartphones, also came the creation of responsive sites. As smartphones grew in popularity, so do websites that are accessible on mobile.

And now, in this timeline, almost every person in the world owns a smartphone, hence that person can become a visitor to your site and can become a potential customer. Therefore website owners MUST ensure the responsiveness of this website on all devices.

If you own a website, you probably know by now that mobile responsiveness is just as important as it’s content. But what if you encounter a problem on the mobile version of your site? Panic? Call a tech-friend? Or pay for a web design service.

Save time and money by following these few easy steps on how to fix that problem.

Just a few days ago a client of ours inquired us about this same issue. The menu was almost covering the entire screen when it is opened on mobile, and it is very annoying to use. Luckily we have the fix just for you.



How To Fix Mobile Navigation Problem?

For this problem, we have created a script. Which is shown below.

Note: Do not change any part of this code in any way. If you do, we can’t ensure if it will work anymore. If you have changed it by accident (pressed a random key for example), just simply copy this code again.


<!-- Collapsible Mobile Menu -->
<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 span.indicator:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute
}
#main-header .et_mobile_menu .menu-item-has-children>a span.indicator:after {
    font-size: 24px;
    content: '\33';
    top: 10px;
    right: 10px
}
#main-header .et_mobile_menu .menu-item-has-children.visible>a span.indicator:after {
    content: '\32'
}
#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>
<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', '#');
            var linkmenu = this.href;
                $(this).attr('href', linkmenu);
        $(this).append( '<span class="indicator"></span>' );
            }            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
              $(this).on('click', function(event) {
                if(event.target.className=='indicator') {
                    $(this).parent().toggleClass('visible');
                    event.preventDefault();
                    event.stopPropagation();
                }
              });
            }
        });
    }    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });})(jQuery);
</script>

Step 1 – Head to Divi Theme Options

Head over to Divi > Theme options. This will take you to the theme options on Divi.

Mobile navigation

Step 2 – Integration

On the theme options, select integration on the options tab.

Mobile navigation

Copy the code above, then paste on the “Add code to the < head > of your blog” section of the integration tab. And then save changes.

As a comparison, this is the mobile navigation problem before.

And this is the mobile navigation after applying the code.

Summary

And that is it? It’s pretty simple, right? In the comparison above, there is a significant improvement in the mobile navigation menu. It is much cleaner and more presentable on mobile.

If you follow the exact steps above, then we are confident that you can fix the mobile navigation problems easily and quickly.

If you have any more questions, contact us or post a comment below and we will answer your concern.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Want more WordPress Tips click here. WebContempo Blog

Need help on making your website look better and more appealing? Need us to ensure the responsiveness of your site? Contact us and let’s make it happen!