2

关于如何保持导航栏无响应，我有一点问题。我的菜单上只有大约 5 个项目。

如果我不为小屏幕分辨率设置折叠，导航栏项目将被堆叠，这不是很方便。

我想让这些元素内联（也许调整它们的大小），因为它对于小屏幕分辨率仍然是清晰的。

这是导航栏的屏幕截图和代码（我使用的是wordpress）。我正在使用 LESS + Grunt 进行编译，因此变量可能位于 Twitter Bootstrap LESS 文件中。

两个屏幕截图（第一个是大屏幕渲染 - 我的偏好 - 第二个，显示当前结果。

大分辨率导航栏

小屏幕分辨率上的导航栏但堆叠

有没有办法保持这个导航栏的内联样式（并且不破坏其余部分的响应性）？

<header class="banner navbar navbar-default navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
        <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
      endif;?>
    </div>
  </div>
 </header>

非常感谢您！

编辑：我猜这个问题似乎来自这个 php 行（它堆叠元素）：

wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
4

1 回答 1

0

当然，堆叠元素的不是 php 代码，但您已经找到了正确的起点。由于代码将指定的类分配给导航元素，请删除“nav navbar-nav”值或将其更改为其他类名，例如“new-navclass”

wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'new-navclass'));

然后编辑您的 style.css 复制您喜欢的内联样式菜单。

另一种方法是编写 js 代码来检测屏幕调整大小，并从菜单元素中删除 'nav-stacked' 类。

于 2013-10-30T12:34:46.447 回答