如何控制 WordPress 二十十二主题中的响应式导航菜单？答案

【问题标题】：How to control the responsive navigation menu in the WordPress Twenty Twelve theme?如何控制 WordPress 二十十二主题中的响应式导航菜单？
【发布时间】：2013-01-18 23:17:49
【问题描述】：

在默认的二十一十二主题中，当浏览器/屏幕宽度小于 600 像素并且功能不同时，顶部主菜单会变为一个按钮。我不知道这个替代菜单用什么代码控制或设置样式。

Twenty Twelve preview

有人可以帮我找到禁用/编辑它的方法吗？

【问题讨论】：

标签： wordpress wordpress-theming

【解决方案1】：

这是由 /navigation.js 脚本处理的 ..

对此负责的行是：

<script src="http://wp-themes.com/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0" type="text/javascript">

您可以在 functions.php 的第 103 行禁用它：

   wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

就这样评论吧：

// wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

话虽如此，我真的不明白为什么有人要禁用它，但我想这与问题无关..

编辑我：

正如@Lucky Son 正确评论的那样，您应该使用wp_deregister_script()

wp_deregister_script( 'twentytwelve-navigation' )

【讨论】：

感谢 Obmerk 将我引导到正确的地方，现在我知道将来如何处理它。我只是想知道它是如何工作的，因为有时菜单在 w600px 下仍然可以清晰显示，并且不需要以这种方式进行更改。
好吧，如果这个答案对您有所帮助，您可能希望接受它以将其标记为已关闭。至于 600px 问题，恕我直言，禁用它是个坏主意，因为您无法控制用户是否在横向模式或其他模式下使用平板电脑。也不是平板电脑类型。
是不是真的很头疼...现在不得不考虑这么多不同的屏幕尺寸！
你应该使用 wp_deregister_script() 来删除它。
如果你也想删除 html，你应该删除
在 header.php 的
元素中

【解决方案2】：

好的，我已经设法弄清楚是什么控制了它，我不确定它是否完全回答了我最初的问题，但我会分享我现在所知道的......

我相信它主要由主题 style.css 中的媒体查询控制。在@media screen and (min-width: 600px) 部分中，您将在屏幕/浏览器宽度超过 600 像素时找到导航菜单的样式，一旦宽度低于 600 像素，替代样式由主题 CSS 文件主体中的 CSS 声明控制，大约在第 578 行:/* Navigation Menu */.

按钮的外观也设置在@media screen and (min-width: 600px)中，代码.menu-toggle {display: none;}下，即隐藏在600px以上，一旦宽度低于600px，就像以前一样，它会出现（不再设置为display：none）和使用 CSS 文件主体中的样式，在第 602 行附近。

因此，如果您想完全禁用该按钮，您可以将其设置为 .menu-toggle {display: none !important;} 以用于所有屏幕宽度，如果您希望主导航菜单的外观保持固定，请确保它的样式也适用于所有屏幕宽度，确保它覆盖@media screen and (min-width: 600px) 下的所有菜单样式。您可以通过在媒体查询块之后编写代码来覆盖它。也可以在 here 找到有关覆盖 CSS 媒体查询的有用答案。

【讨论】：

【解决方案3】：

上述解决方案无效。这似乎只是阻止菜单按钮起作用。我正在尝试做的（我假设 OP 也是如此）是防止它添加丑陋的菜单按钮，并且只使用与桌面上相同的导航。

我的网站顶部只有三个按钮，可以轻松适应我的移动屏幕，相反，我得到了一个巨大的按钮，可以打开一个巨大的下拉菜单。这有零逻辑。几乎没有二十一十二主题的逻辑，默认情况下将“留下回复”按钮放在帖子的顶部。愚蠢的设计师。

【讨论】：

嗨，请看下面我自己的回答。希望对您有所帮助。

【解决方案4】：

如果你问我最简单的解决方案是添加 min-width: 960px;在 CSS 中，因此它不会在 960 像素以下调整网站主体的大小。

@media screen and (min-width: 600px) {

    .site {
        margin: 0 auto;
        max-width: 960px;
        min-width: 960px;                            --- THIS LINE ADDED
        max-width: 68.571428571rem;
        overflow: hidden;
    }

【讨论】：

【解决方案5】：

应用移动插件并禁用菜单可能是谨慎的做法。从而允许用户选择。我想这取决于菜单中的元素。

【讨论】：