Different menu for mobile

[fgrondon]

Is there a way to show a different menu when the site is viewed from a mobile device?

I would like to show certain menu items when viewed from a desktop and different ones when viewed from a mobile device.

I am using minimum pro

[Victor Font]

This is tricky, but it is doable. Menus are generated by PHP, a server-side process. PHP does not know or care what type of device your site is being accessed by. PHP generates code. That's all.

Client side, jQuery/JavaScript have access to the Document Object Model or DOM. The DOM is the object that contains all of the information pertinent to the device and mobile access. CSS also executed client side in the browser.

There are two ways that I know of where you can swap the menu. First, you could have a completely separate menu for mobile that is generated by PHP through a jQuery Ajax call after the page is initially loaded. This will be inefficient and cause a slight delay in the page display.

Second, you can create a single giant menu and assign different classes to the desktop and mobile items. Using jQuery, you can determine the device display and hide/show the menu items by looping through the menu and displaying the appropriate items. Don't forget to add the classes to sub-menus also, otherwise the display will be screwy.

As for the code, this will take a lot to figure out, maybe as much as half a day. If you're not too skillful with jQuery, you may want to think about hiring a developer.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[chrisbrandon]

There are several plugins that do exactly what you're looking for. I used ShiftNav on one of my sites.

[Author]

Posts