如何控制 WordPress 二十十二主题中的响应式导航菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14683659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control the responsive navigation menu in the WordPress Twenty Twelve theme?
提问by user1794295
In the default Twenty Twelve theme the top main menu changes to a button when the browser/screen width is less than 600px and functions differently. I have no idea what code controls or style this alternative menu.
在默认的二十十二主题中，当浏览器/屏幕宽度小于 600 像素时，顶部主菜单会变成一个按钮，并且功能不同。我不知道是什么代码控制或设计了这个替代菜单。
Can someone please help me find a way to disable/edit this?
有人可以帮我找到禁用/编辑它的方法吗？
回答by Obmerk Kronen
This is handled by the /navigation.js script ..
这是由 /navigation.js 脚本处理的。
the line responsible for this is this :
对此负责的线路是这样的：
<script src="http://wp-themes.com/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0" type="text/javascript">
you can disable that on line 103 at functions.php :
您可以在第 103 行的 functions.php 中禁用它：
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
Just comment it like so :
就这样评论吧：
// wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
That being said, I do not really understand why would anyone want to disable this , But I guess that has nothing to do with the question ..
话虽如此，我真的不明白为什么有人要禁用它，但我想这与问题无关..
Edit I :
编辑我：
as @Lucky Son correctly commented , you should use wp_deregister_script()
正如@Lucky Son 正确评论的那样，您应该使用wp_deregister_script()
wp_deregister_script( 'twentytwelve-navigation' )
回答by user1794295
OK I've managed to figure out what controls this, I'm not sure if it answers my original question completely but I will share what I know now...
好的，我已经设法弄清楚是什么控制了这个，我不确定它是否完全回答了我原来的问题，但我会分享我现在知道的......
I believe it's mainly controlled by the media queries in the theme's style.css. In the section @media screen and (min-width: 600px)you will find styling for the navigation menu at screen/browser widths above 600px and once the width goes below 600px, the alternative styling is controlled by CSS declarations in the main body of the theme's CSS file, around line 578: /* Navigation Menu */.
我相信它主要由主题的 style.css 中的媒体查询控制。在该部分中，@media screen and (min-width: 600px)您将在屏幕/浏览器宽度高于 600 像素处找到导航菜单的样式，一旦宽度低于 600 像素，替代样式将由主题 CSS 文件主体中的 CSS 声明控制，大约在第 578 行：/* Navigation Menu */。
The appearance of the button is also set in @media screen and (min-width: 600px)under the code .menu-toggle {display: none;}i.e. it is hidden above 600px and once the width goes below 600px, like before, it appears (no longer set to display:none) and uses the styling in the main body of the CSS file, around line 602.
按钮的外观也在@media screen and (min-width: 600px)代码下设置，.menu-toggle {display: none;}即它隐藏在 600px 以上，一旦宽度低于 600px，就像以前一样，它就会出现（不再设置为 display:none）并使用主体中的样式CSS 文件，大约在第 602 行。
So, if you want to disable the button altogether you can set it to .menu-toggle {display: none !important;}for ALL screen widths and if you want the appearance of your main navigation menu to stay fixed, make sure it is also styled for ALL screen widths, ensuring it overrides all of the menu styling under @media screen and (min-width: 600px). You can override it by writing your code after the media query block. Useful answers on overriding CSS media queries can also be found here.
因此，如果您想完全禁用该按钮，您可以将其设置为.menu-toggle {display: none !important;}适用于所有屏幕宽度，并且如果您希望主导航菜单的外观保持固定，请确保它也适用于所有屏幕宽度，确保它覆盖所有屏幕宽度下的菜单样式@media screen and (min-width: 600px)。您可以通过在媒体查询块之后编写代码来覆盖它。也可以在此处找到有关覆盖 CSS 媒体查询的有用答案。
回答by Sasha
Above solution did not work. This just seemed to prevent the menu button from functioning. What I am trying to do (and I assume as is the OP) is to prevent it from adding the ugly menu button and just use the same navigation as on desktop.
上述解决方案不起作用。这似乎只是阻止菜单按钮起作用。我正在尝试做的（我假设 OP 也是如此）是为了防止它添加丑陋的菜单按钮，并且只使用与桌面相同的导航。
I only have three buttons on my site at the top, which would easily fit onto my mobile screen, instead I get a huge button which opens a huge dropdown. There is zero logic to this. Almost less logic than the Twenty Twelve theme putting the 'leave a reply' button at the top of the post by default. Stupid designers.
我的网站顶部只有三个按钮，很容易适合我的移动屏幕，相反，我得到了一个巨大的按钮，可以打开一个巨大的下拉菜单。这有零逻辑。默认情况下，将“留下回复”按钮放置在帖子顶部的“二十十二”主题几乎没有逻辑。愚蠢的设计师。
回答by Nikola Pervan
If you ask me the easiest solution is to add min-width: 960px; in CSS so it wont resize the main body of site under 960px.
如果你问我最简单的解决方案是添加 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;
}
回答by wtecuk.net
It may be prudent to apply a mobile plugin and disable the menu. Thereby allowing the user to select. I suppose it depends on the elements in the menu.
应用移动插件并禁用菜单可能是谨慎的做法。从而允许用户进行选择。我想这取决于菜单中的元素。
