Archived

This topic is now archived and is closed to further replies.

  • 0

Select an other menu with mobile menu

Question

Posted · Report post

I use the responsive fixed-top-menu. And that is great. But, I've several menu items in the topmenu and I want to limit the menu when it is responsive (now I have a lot of menu items in the submenu's). Hope there is someone who can give me a hint for a solution.

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Hi there,

 

If you feel confident, you could be getting your hands dirty with some PHP, for a cleaner result that display:none.

 

There are 2 plugins that could give you the right conditionals to start your function for switching menus. Depending on what you want to achieve you can install:

http://wordpress.org/extend/plugins/mobble/

or

http://wordpress.org/extend/plugins/php-browser-detection/

They will effectively allow you to target browsers, browser versions or user agents.

 

After you chose which conditionals to use, you can tweak this code to suit your purposes functions.php:

if( is_user_logged_in() ) {
    $menu = 'logged-in-menu';
} else {
    $menu = 'logged-out-menu';
}
 
wp_nav_menu( array( 'menu' => $menu, 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

The code above is from this tutorial: http://www.agentwp.com/show-different-menu-items-to-logged-in-users. I am not sure if it works, but you get the idea from it.

 

I have successfully used PHP Browser Detection to switch between NavBar and BrandNav based on the IE version. So the plugin does the job at distinguishing between browsers.

 

It's just  a matter of getting your function right and choosing the right conditionals.

 

Good luck and let us know if you need further assistance.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Do you mean in the mobile versions you only want certain items to display yet keep them all visible in the desktop version? If so you might be able to do this using the browser specific css plugin and setting the li item you want to hide on the mobile version by using the display:none css command.

 

You can download this plugin here -http://www.pagelines.com/store/plugins/browser-css/ and find out more on how to use the browser specific css plugin here - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

If you mean that in the mobile view you want to select a completely separate menu, then as far as I'm aware this isn't possible without recoding. You might be able to set up another menu using a different section (eg, brand nav on desktop/navbar on mobile) and then use the browser specific css to hide/display on either option.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the quick reply. The display:none solution is in my idea the quick and dirty method. I hoped someone has made something smart where you can select within a specific responsive range another menu. I'll try your solution.

Share this post


Link to post
Share on other sites

Posted · Report post

There's a plugin called mobile menu, this will work with the brandnav or classic nav - http://www.pagelines.com/store/plugins/mobile-menu/ unfortunately it won't work with the fixed nav, or allow another custom menu to be chosen in the mobile view :-(

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the reply. I have for now enough to work through I guess :) Great!

Share this post


Link to post
Share on other sites

Posted · Report post

Did Anthalis suggestion resolve your issue.

Share this post


Link to post
Share on other sites