Search

How to Make a Responsive Accordion Menu in Genesis

Listen to this article

Responsive-Testing-WordPress-Plugin

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.

Responsive-Accordion-menu-website
Website Footer – Desktop View
Responsive-Accordion-menu-mobile
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!

Aruna Vadlamani

Aruna Vadlamani

One Response

  1. This is wonderful, and solved our problem! One question: Is is possible to have the menu default to the collapsed state? When I bring up the menu, it is possible to collapse it, but initially all the sections are shown.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads