我想隐藏桌面上的菜单，但在小屏幕上仍可见

时间：2015-11-27 作者：Zorica Petkovik

我添加了下面的代码，以便在我的主页中隐藏导航菜单。

add_filter( \'pre_wp_nav_menu\', \'wpse_210095\');
function wpse_210095($menu) {
  if (is_home()) {
   $menu = \'\';
  }
  return $menu;
}

请有人帮我一下，让我知道怎么做才能让它回到小屏幕上。我使用的主题是wp-spirit01. 我的网站还没有上线。

1 个回复

SO网友:AddWeb Solution Pvt Ltd

是的，您可以使用媒体查询来完成此操作。如果你不介意的话，我建议你使用media query simple。

确切的查询将取决于您的站点结构以及菜单在代码中的标识方式。在你这么做之前，确保你的导航不会被隐藏；大多数网站导航都位于网站标题内。

请尝试在中添加以下CSS代码style.css 主题的文件。

//Set by given example theme link (http://www.template-joomspirit.com/theme-wordpress/theme-01/)

/*This CSS code apply while screen resolution is less OR 480 px only, you can change min-width value as per your requirement*/
@media screen and (max-width: 480px){
    .drop-down span.title_menu {//For menu button, Class set for example only, Please change it with your requirement...
        display: none !important;
    }

    .drop-down ul {//For Navidation, Class set for example only, Please change it with your requirement...
        display: block !important;
    }
}

或者，如果您的主题没有自定义CSS选项卡，请使用Simple Custom CSS 插件。此插件旨在满足管理员的需要，他们希望将自己的CSS添加到WordPress网站。

这将删除分辨率小于480px的菜单。

以下是一些有关媒体查询的信息，这些信息应该会有所帮助：

CSS TRICKS - Media Queries for Standard Devices

CSS TRICKS - Logic in Media Queries

Using media queries

Use CSS media queries for responsiveness

希望这有帮助。如果对此有任何疑问，请告知我。