Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Heidi Jermyn Heidi Jermyn
Heidi Jermyn Heidi Jermyn
695 Points
Posted by Heidi Jermyn Heidi Jermyn
Heidi Jermyn Heidi Jermyn
695 Points

What is best practice approach for multiple menus in responsive WordPress website?

Hi, I'm new to Tree House but not so new to WordPress. I am currently building my own basic "bare bones" theme based on _underscores for all future client work (in the past I have relied upon Woo Canvas). My coding wouldn't be that strong so I've come to TreeHouse to try to implement best practice across my development.

My question relates to the best approach to showing navigation menus on a smaller screen. My theme contains two top menus. I don't think it would make good UI sense to have 2 "open menu" buttons on the small screens - I was thinking of creating a third menu (via WP admin) that contains all the menu items that I want displayed on a smaller screen. So when the screen gets smaller (say less than 768px) both top menus disappear (hidden via css) and one "open button" menu displays and shows this "third menu" on click.

Is this the right approach? Or should I do some JS stuff (which I'm not very good at) to put the 2 current menus under one button? So I don't have a third unnecessary menu floating around? I don't really know how to approach the latter.

I hope this makes sense? I don't know if I am being to pedantic about this but just want to make sure my code is ... efficient.

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

Your instincts are right - you can use CSS media queries to display different menus and/or menu positions for different responsive widths (or breakpoints, as we say). Essentially yes, you need duplicate menus.

Depending on if you need different JS/jQuery functionality for each menu layout, you may need to give them separate IDs and address them that way; but you'll definitely need alternate CSS at the very least, and alternate HTML / template tags as needed.

The best thing to do is start with the mobile experience first and work your way up to wider screens, rather than trying to squish a ton of desktop content down into a phone. You'll have to exercise some judicious editing and use content strategy to determine what is really important from the various stakeholders' perspective (different visitors, the site owners, business goals etc).

If I can plug my wife's book... :) you might want to have a look at Learning Responsive Web Design from O'Reilly as it's a great resource for people who already have decent familiarity with HTML + CSS to pick up the basics of responsive layouts, and lists much of what you need to consider in terms of navs, content etc.

Since you're doing this from scratch, this is a bit easier than trying to adapt an existing site that way.

Various solutions may include:

  • Split the navs (main at top, secondary nav further down below a banner, or in the footer, depending on page length)
  • the "jump to footer" type of nav which moves it entirely out of the top area and reduces it to a single anchor link on mobile
  • Rearranged navs - horizontal menus can convert to grids or lists, or vice versa.
  • Use faceted navigation or search
  • Offer multiple entry points on a landing page, such as mid-page calls to action, decluttering main nav.
  • If you must have a lot of items, you may need to resort to the dreaded hamburger menu side slide-out; relatively easy with jQuery.
  • Combining smaller menus into single menus
  • Eliminating sub-categories from menus, if it's easy to find the subcats via main category pages
  • Consider your site taxonomy; do you need a lot of categories, or are some things infrequent enough that you can demote them to tags?
Heidi Jermyn Heidi Jermyn
Heidi Jermyn Heidi Jermyn
695 Points
Heidi Jermyn Heidi Jermyn
Heidi Jermyn Heidi Jermyn
695 Points

Thanks for your comments AJ. I really appreciate you taking the time to answer me on such a subjective topic!

I think I will have two navigation menus up top for desktop (or greater than 768px) and then reduce down to a single navigation within an "open menu" button that contains essential menu items only.