Semblance Digital Studio

Design and digital studio for startups, using WordPress as a CMS

  • Home
  • Services
  • Projects
  • Blog
  • Contact
You are here: Home / Blog / Wordpress / Responsive Genesis child theme menu

Responsive Genesis child theme menu

Posted on 1 December 2014 in Wordpress ♦ Estimate reading time: 2 minutes ♦ by Elzette Roelofse

responsive wordpress mobile menuOn 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.

 

Related Posts

  • How to add a responsive SVG, that can be styled and animated, to your web pageHow to add a responsive SVG, that can be styled and animated, to your web page
  • WordCamp London 2016WordCamp London 2016
  • Some Costumes at Venice Carnival 2010Some Costumes at Venice Carnival 2010

No Comments

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

semblance logo enquiries@semblance.design © 2022
  • Email
  • Twitter
  • Instagram