如何在WordPress中为我的引导主题的移动版本添加不同的菜单？

我有一个桌面和平板电脑的主菜单，但我想在用户进入移动视图时更改该菜单中的链接。不确定从哪里开始。这是我在header.php文件中为桌面版本的引导菜单所做的操作：

<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 -->

切换

---

我是在为手机添加另一块吗？不太确定。

我建议在导航栏上使用引导类：

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

然后使用类为mobile创建单独的导航栏：

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

这将允许您设置指向完全不同的内容的链接，而不会以不利的方式影响导航栏

以下是有关“隐藏”和“可见”类的更多信息：

---

对于那些只想分离手机屏幕（带按钮的屏幕）和普通条的人，请使用以下类别：

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

基于按钮的菜单：

<div class="hidden-xs">

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

常规菜单栏：

<div class="hidden-xs">

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

---

Bootstrap 4提供了隐藏或添加特定断点菜单项的实用程序。在我的例子中，我不得不在移动视图中添加一些菜单项，它们是桌面视图中辅助导航的一部分（在移动视图中消失）。因此，要仅在lg断点下方的屏幕上添加菜单项，请添加d-lg-none类（示例使用React语法）：

仪表板

更多信息可在此处找到：

Bootstrap 4根据屏幕大小隐藏元素 .hidden-*类（引导4 Alpha）和.visible-*（引导3）被删除

您需要使用display属性，主要是d--none（隐藏）和d--block或d-*-inline块（显示）

如果您希望某个元素隐藏在sm及以下大小，但在md、lg和xl上可见，请使用d-none d-md-block

        s (<576px)  sm (≥576px)     md (≥768px)     lg (≥992px)     xl (≥1200px)    

---

s（好的，我可以这样做。如何添加备用nav？我会在wordpress菜单组件中创建第二个nav吗？是的，它应该位于您正在使用的主题的header.php文件中。@Bs3kg，而不是单独的，我在其中添加了一个单独的
。这不是一个很大的变化，但对于我的情况来说似乎是一个更好的解决方案，重复次数更少未标记的标记（例如导航栏标题）。