On of the biggest issues a web designer face, designing a responsive WordPress theme, is how to deal with the screen estate. The mobile visitors has the right to all of the same content as the desktop visitors. It can become tricky to organise the content for all of these different screen widths and devices, whilst still looking good, being practical and accessible.
To me it makes sense for the developer to build the WordPress theme, working from mobile first, up to the desktop version. It has also become almost standard, for a mobile display of the website, to serve a button to toggle the full menu. For me personally, this works quite well. I had a poke around the internet and found tessalt’s GitHub repository – dropdowns.
I have been working with the WordPress Genesis Framework for a while now. For each project I do, I prefer to design a customWordPress Genesis child theme. Then for the developer side of things, I implement this dropdown menu for narrower screen sizes. I’ve used this a couple of times and have now implemented a version that uses specifically the Genesis default classes in the navigation. You do need to double check the classes used to the menu you’ve added to your theme.
What I like about this menu is that the jQuery is setup to support the menu 2 levels down, it also pushes down the body content, when the toggle has the menu open. The breaking point to include the toggle button can be changed. The pixel width need to be updated in the jQuery and CSS file.
The adapted version of this menu can be downloaded here. Also have a look at the demo here.
Leave a Reply