How to Make a Responsive Accordion Menu in Genesis

The internet world has transitioned along the years. It is no more restricted to desktops. As a matter of fact while designing websites a designer can never be sure of the various number of devices a particular website will be viewed on. Ranging right from desktops and laptops to mobile phones and tablets, the spectrum of devices and their sizes are varied.

In such a scenario it has become crucial to provide the users with an improved user experience with. This improved experience would include delivering to the client a website which is responsive along with incorporating all the important information into a mobile device view.

In this article, I am going to explain to you how to make a responsive accordion menu in Genesis.  If that was too much of technical jargon for you then let’s understand what I am talking about with the help of images.

Website Footer – Desktop View

Responsive Accordion Menu – Mobile View

The above images are that of a footer menu which was horizontal in the desktop view and  has been made vertical in the mobile view. Furthermore the menu and submenu items in the mobile view are displayed as an accordion.

This responsive accordion menu in Genesis provides the customer with a refined and simple to use interface. So let’s start with learning how to develop a responsive accordion menu in Genesis.

Add ‘+’ Sign in the Responsive Accordion Menu

<a class="wdm-mobile">+</a>

If you happen to be using the same menu in the primary navigation as well as the footer then you might need to add styling which displays the ‘+’ sign in the responsive accordion menu only and hides it in the primary navigation menu using the following code.

.genesis-nav-menu a.wdm-mobile, .site-footer .menu a.wdm-mobile {
display: none;
}

Style the Responsive Accordion Menu

The following is a code that I have worked up to serve my requirement which was to add a responsive accordion menu to the footer of the website. This should work out for most cases but sometimes minor tweaks might be required to make it a custom fit for your requirements.

This code should be incorporated into the style.css file in of your themes folder.

@media (max-width:639px){
    .site-footer .menu li{
        display:block;
    }
    .site-footer .sub-menu{
        position:static;
        display:none;
    }
    .widget-footermenu-container aside section.widget_nav_menu{
        width:100%;
        float:none;
    }
    .site-footer .menu > li > a{
        text-align:left;
        display:inline-block;
    }
    .site-footer .menu li{
        text-align:left;
        border:1px solid white;
        padding:5px 10px;
    }
    .site-footer .menu a.wdm-mobile{
        display:inline-block;
        float:right;
    }

}

jQuery Trigger on Window Resize

• Mobile view essentially means that the page is resized to fit in a mobile device screen in such a way that the content on the page is comfortable to read and page become easy to navigate without any distortion. The following jQuery should be

jQuery( window ).resize(function() {    
    jQuery('.menu-item-has-children .wdm-mobile').toggle(function(){
    jQuery(this).parent().find('.sub-menu').show(300);
    jQuery(this).text("-");
    },function () {
         jQuery(this).parent().find('.sub-menu').hide(200);
         jQuery(this).text("+");
    });
});

So that was about a responsive accordion menu in Genesis. Do you think you can make this article better? Write to me in the comment section and let’s get this discussion started!

• WordPress Tips & Tricks

Share:

• Aruna V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!