如何在WordPress的引导主题的移动版本中添加其他菜单? [英] How can I add a different menu to the mobile version of my bootstrap theme in WordPress?

问题描述

我有一个用于台式机和平板电脑的主菜单，但是我希望当用户进入移动视图时该菜单中的链接能够更改.不太确定从哪里开始.这是我在header.php文件中为台式机版本的Bootstrap菜单所做的操作:

I have a main menu for desktop and tablet but I want the links in that menu to change when the user gets to the mobile view. Not really sure where to start. This is what I did for the Bootstrap menu for my desktop version in my header.php file:

<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"<?php bloginfo( 'name' ); ?>><img src="<?php bloginfo('template_directory');?>/img/snaglogo.png" /></a>
</div>
<div class="collapse navbar-collapse">


<?php
    $args = array(
          'menu'         => 'header-menu',
          'menu_class'   =>'nav navbar-nav navbar-right',
          'container'    =>'false'
          );
            wp_nav_menu( $args );

 ?>

</div><!--/.nav-collapse -->

我要为手机添加另一块吗?不太确定.

Am I adding another piece for mobile? Not really sure.

推荐答案

我建议使用bootstrap类在您的导航栏上:

I would suggest on your navbar using the bootstrap class:

<div class="hidden-xs hidden-sm">

然后使用以下类为移动设备创建单独的导航栏:

Then creating a separate navbar for mobile with the classes:

<div class="visible-xs visible-sm hidden-md hidden-lg">

这将使您可以将链接设置为完全不同的内容，而不会以不利的方式影响导航栏.

This will allow you to set the links to something completely different, without effecting the navbar in an adverse way.

以下是有关隐藏"和可见"类的更多信息:

Here is more information about the "hidden" and "visible" classes:

http://getbootstrap.com/css/#sensitive-utilities-classes

这篇关于如何在WordPress的引导主题的移动版本中添加其他菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！