16 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Located in Spain
gerardbm says

Hi!

I’ve noticed that most of the premium themes have two menus in the code. For example, the normal menu for large screens, using UL > LI tags, and then the responsive menu for smaller screens, using SELECT > OPTION. This second menu normally is generated using a jQuery script through the first menu, which is dynamic from the WordPress menus page.

So if you have, let’s say, a menu with 7 links and 10 sub-links into each one, that means you have 70 links in the HTML plus 70 the same links! (When the screen is larger than 960px, display the UL tags and hide the SELECT box, and when the screen is smaller than 960px, hide the UL and display the SELECT box).

In other WordPress themes, they don’t use a SELECT box for the responsive menu, but they use a different solution also duplicating the links, so at the end they have the same menu twice!

Do you think is it possible to find better practices for the responsive menu? Is it a real problem or, by the contrary, is it accepted for Google and searchers? Which is the best solution to make a responsive menu?

I need your opinion :)

622 posts Fuel Your Web
  • Elite Author: Sold more than $75,000 on Envato Market
  • Won a competition
  • Had an item featured on Envato Market
  • Has been part of the Envato Community for over 7 years
+5 more
Pirenko says

In my opinion we don’t need an extra menu… Why don’t we style differently the menu according to the screen size or device type? I’ve been using this technique and never had any trouble with it.

16 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 1 year
  • Located in Spain
gerardbm says

In my opinion we don’t need an extra menu… Why don’t we style differently the menu according to the screen size or device type? I’ve been using this technique and never had any trouble with it.

Yes that is what I also think, actually. But I wonder how to make it really respnosive and usable when we have a lot of links. Probably making a multi drop-down?

For example Avada uses a drop-down list instead of a select box, but they keep the two menus even with the same HTML structure. That’s really strange when they found a solution for the same HTML (UL, LI, .sub-menu…).

622 posts Fuel Your Web
  • Elite Author: Sold more than $75,000 on Envato Market
  • Won a competition
  • Had an item featured on Envato Market
  • Has been part of the Envato Community for over 7 years
+5 more
Pirenko says

You can add a CSS class to elements that should not be displayed on mobile. By default Wordpress supports adding classes to menu items so there’s no problem with this too ;)
Let me just add that I have already sold a few thousand themes and I was never asked to do hide elements on mobile.

by
by
by
by
by
by