How to get a different mobile menu and desktop menu in WordPress

I started to update this site so that it passes the google mobile friendly test. As a result I have two sites, one is the desktop version and one is for mobile devices. My desktop menu bar has 3 items “Home”, “About”, “Contact”. I wanted my mobile site to have a completely differnet menu, I wanted it to show categories in the menu bar.

The problem is that WordPress does not allow you to specify a different menu for a mobile site or a desktop site. I stumbled on an easy way to assign a specific desktop menu to a desktop site.

  1. Create two menu bars. WordPress > Appearance > Menus, call one menu “desktop-menu” and call the second one “mobile-menu”. Assign the Mobile menu bar as primary navigation so that it appears on both Mobile and Desktop sites.
  2. Now to assign the Desktop-Menu to the desktop site. Locate your header.php for your theme your theme wp-content > Themes > your theme > header.php. Locate the navigation section and change the wp_nav_menu from ‘primary’ to ‘desktop-menu’ Now your Desktop site will use the deskto-menu you created earlier

‘container_class’ =–> ‘menu-header’, ‘theme_location’ => ‘desktop-menu

wordpress desktop menu: \wp-content\themes\your_theme\header.php



This entry was posted in Apps and tagged , , . Bookmark the permalink.

Leave a Reply

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