如何控制WordPress Twenty Twelve主题中的响应式导航菜单？

在默认的”Twenty Twelve”主题中, 当浏览器/屏幕宽度小于600px且功能不同时, 顶部主菜单将变为按钮。我不知道什么代码控制或设置此替代菜单的样式。

Twenty Twelve预览

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

#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' )

#2

好的, 我设法弄清楚了什么可以控制它, 我不确定它是否能完全回答我原来的问题, 但我将分享我现在所知道的…

我相信它主要由主题style.css中的媒体查询控制。在@media屏幕和(最小宽度：600像素)部分中, 你将找到导航菜单的样式, 其屏幕/浏览器的宽度大于600像素, 一旦宽度小于600像素, 替代样式将由CSS声明控制。主题的CSS文件, 位于第578行附近：/ *导航菜单* /。

按钮的外观也可以在@media屏幕中设置, 并且(最小宽度：600像素)在代码.menu-toggle {display：none;}下也可以设置, 即按钮隐藏在600像素以上, 一旦宽度低于600像素, 就像以前一样它会显示(不再设置为display：none), 并在CSS文件的主体中(第602行左右)使用样式。

因此, 如果要完全禁用该按钮, 则可以将其设置为.menu-toggle {display：none！important;}, 以用于所有屏幕宽度, 并且如果要使主导航菜单的外观保持固定, 请确保该按钮是固定的还设置了所有屏幕宽度的样式, 确保覆盖了@media屏幕和(最小宽度：600像素)下的所有菜单样式。你可以通过在媒体查询块之后编写代码来覆盖它。你还可以在此处找到有关覆盖CSS媒体查询的有用答案。

#3

上述解决方案不起作用。这似乎阻止了菜单按钮的功能。我试图做的事情(我假设也是OP)是为了防止它添加难看的菜单按钮, 而只是使用与台式机相同的导航。

我的网站顶部只有三个按钮, 可以轻松地放在我的手机屏幕上, 取而代之的是一个巨大的按钮, 可以打开一个巨大的下拉菜单。这有零逻辑。默认情况下, 与”Twenty Twelve”主题相比, 逻辑更少, 将”留下回复”按钮置于帖子顶部。愚蠢的设计师。

#4

如果你问我, 最简单的解决方案是添加最小宽度：960px;在CSS中, 因此它不会在960px以下调整网站主体的大小。

@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

应用移动插件并禁用菜单可能是明智的。从而允许用户进行选择。我想这取决于菜单中的元素。