How to add a mobile responsive menu to your Genesis WordPress website

[John]

A long while back I developed a mobile menu solution for my Genesis-powered websites and I finally decided to write a tutorial about it. I offer it here for your perusal and feedback. Enjoy!

How to add a mobile responsive menu to your Genesis WordPress website

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Susan]

Thanks for sharing!

[olivier.moreau]

Hi John

Thanks for sharing your solution but I'm a bit afraid to try it when I read :
This CSS that I’ve worked up should work on any Genesis website, though you may need to modify it to blend in seamlessly with your website.
I'm not at ease with modifying CSS or PHP and I would expect to have a responsive menu directly in a pro theme like Genesis Agency. I noticed that the new basic WP theme "twenty thirteen" contains a responsive menu and also a search tool looking just fine on a smartphone...
Another thinks that bothers me is changing a child theme which is not mine. When Studiopress will do an update, we'll have to inject that code again ?

[John]

Hi Olivier,

A tutorial like this one expects (requires?) some level of comfort with modifying code, whether that code is CSS or PHP, but you'll never reach that comfort level until you start somewhere. Breaking websites by trying something new is a great way to learn, and it's how most of us learned to do this, I suspect. Just have a way or a plan for un-breaking what you do break. Also, it's a good idea to try something new on a backup copy of your site before you do the live version, though it can be more exciting to do the live version first. 🙂

I looked at the mobile menu on Twenty Thirteen after you mentioned this, and it's okay, but if your menu is much bigger than what they have there I think you'll want to try a different method. My opinion, anyway.

As far as changing a child theme, StudioPress, and probably every other theme shop you can find, expects you to modify the child theme to some extent. After all, the reason we use child themes is so that we can easily make modifications to our websites. Other than Genesis being updated on a semi-regular basis, which doesn't affect your child theme's files, child themes are rarely updated. And even when they are the number of files in a child theme is minimal, so comparing the old and the new and preserving your modifications isn't really a big deal at all.

So go break something, and have fun learning while you do it! And if you try the tutorial and get stuck, drop me a comment on my blog post and I'll help you out the best I can.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[olivier.moreau]

Thanks for your long reply John.
I fully agree about your philosophy of "learning by mistakes as long as you have a backup". When I do modify CSS or PHP files it's with FTP plus jEdit and not with the yucky build in editor. I also always leave some /*TAG*/. So far, I only did small changes (like colors or font size) but your example is a HUGE modification and I don't understand all of it. I really appreciate that you offer to help if I get stuck, although I hope to not need your support. I'll let you know when it's done...

[John]

Sounds like you're on the right track. I don't ever recommend using the built-in editor - if you break something there you can be locked out of your site. And commenting your code is always a good idea, like you mentioned.

Looking forward to seeing how it works out for you.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[olivier.moreau]

Hi again John

I tried your code and it works just fine. Great stuff, thanks a lot.

However I'd like to make two changes :

1- At top the "Menu v" is in the header and it would look nicer under the header (same place than the menu on large screen)

I changed :
.mobile-footer-nav-link {
display: inline-block;
float: right;
/* line-height: 2; */ /* adjust to suit your theme - Metro needs this */
margin: 8px; /* adjust to suit your theme - CHANGED TO 120px */
max-width: 30%; /* for iOS */
white-space: nowrap;
}

but there is a bad side effect 🙁 A huge empty space under the menu...

2 - At the bottom, I'd like to display the menu under the footer instead of above.
I just cannot figure out where to do that in the code.

[John]

Glad you tried it!

For change #1 I may need to see the site in question before I can be of much help, but you could try changing the action hook genesis_header to genesis_after_header that might work.

For change #2, if you change the action hook genesis_before_footer to genesis_after_footer in the functions.php code, that should do the trick.

Making either of these changes will probably require some CSS edits to make the changes complete.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[olivier.moreau]

This reply has been marked as private.

[olivier.moreau]

This reply has been marked as private.

[John]

Olivier,

I originally played around with placing the menu below the footer, like you have it now, but I thought it was more user-friendly to have it just after the content. Plus, for menus that are shorter than the device screen they appear at the top of the screen when you click the Menu link, instead of somewhere lower on the screen.

For change #1, the menu link is behind your slider, and you'll need to play with that CSS a bit to bring it out. A better solution might be to leave the action hook as it was, but change the priority from 6 to something else, like 20. That way, I think, it would show up after your search widget and you could float it to the right of that.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[olivier.moreau]

Hi again John

I made more changes in the code and got it just the way I like.

For change #1, I changed (in fonction.php) the action hook genesis_header to genesis_header_right. I did not change the priority. I found that by installing the plugin Genesis Hook to see what was going on.

That change put the "Menu" just beside the search bar. Unfortunately that search box was a bit too large so I also changed its width in style.css


/* Search Form

.s {
border: 1px solid #aaa;
color: #666;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
margin: 0 -7px 0 0;
padding: 6px 5px;
width: 120px; /*OMCSS old value =170px*/
}


For change #2, I simply followed your suggestion : I changed the action hook genesis_before_footer to genesis_after_footer.
In my case the menu looks better there but before the footer is fine too.

Your code could be included in the "Code Snippets" of Studiopress... I'm sure many people could use it.

This is the first time I played with Genesis Hooks and I now understand the power it gives. This is a very cool feature of the framework !

This is also the first time I used this forum and I'm very impressed with the quality of support I received from you. Thanks a lot again.

[John]

Hey Olivier,

Glad it all worked out for you, and thanks for adding the tips and suggestions for switching up the code. I agree, there is a lot of power and extensability in the Genesis framework. Once you get through the learning curve, nearly anything is possible!

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts