Question

我的网站http://sitandwonder.com.au使用woocommerce构建在wordpress中。

我不喜欢我当前主题的菜单在移动设备上的显示方式。

我找到了一种使用插件添加响应式菜单的方法，但结果是我最终得到了2个菜单。有没有办法我可以输入一些自定义CSS来隐藏我的旧菜单而不隐藏新的插件菜单？

Answer 1

假设您有以下菜单：

nav{
  width: 80vw;
  height: 40px;
  background: rgb(43,43,43);  
  color: #FFFFFF;
  margin: 0 auto;
}

nav ul li{
  display: inline;
}

@media screen and (max-width: 678px){
  nav{
    display: none;
  }
}

<nav>
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
  </ul>
</nav>

添加CSS规则@media将允许您根据屏幕方向检测和应用样式：landscape,portrait，无论是handheld设备，还是仅通过确定屏幕宽度：{{ 1}}，这些被称为media queries。

<强> PS

重要的是你添加你认为与你的问题找到解决方案相关的代码部分但是，我认为你是StackOverflow的新手，所以希望你不会得到一个投票，并希望这会有所帮助。

请确保您在全屏幕上运行代码片段，否则将无法显示...

Answer 2

假设您有以下菜单：

＆＃13;

nav{
  width: 80vw;
  height: 40px;
  background: rgb(43,43,43);  
  color: #FFFFFF;
  margin: 0 auto;
}

nav ul li{
  display: inline;
}

@media screen and (max-width: 678px){
  nav{
    display: none;
  }
}

＆＃13;

<nav>
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
  </ul>
</nav>

＆＃13;

添加CSS规则@media将允许您根据屏幕方向检测和应用样式：landscape,portrait，无论是handheld设备，还是仅通过确定屏幕宽度：{{ 1}}，这些被称为media queries。

<强> PS

重要的是你添加你认为与你的问题找到解决方案相关的代码部分但是，我认为你是StackOverflow的新手，所以，希望你不会得到一个投票，并希望这个帮助

Answer 3

有一项功能可以检查当前设备是否在wordpress中移动

<?php if(is_mobile(){
    load_your_mobile_menu();
}else{
    load_your_desktop_menu();
}?>

/ *将相应的load_your_mobile_menu（）和load_your_desktop_menu（）替换为相应的移动和桌面菜单* /

Answer 4

将它放入你的style.css

@media only screen and (max-width: 1024px) {
div#responsive-menu-container,
button#responsive-menu-button,
header#header {
    display: none !important;
}
}

安装此插件WDES Responsive Mobile Menu

在body标签下方或之后添加此代码。通常，这可以在模板的header.php中找到。

<?php wdes_rmm_mobile_responsive_menu(); ?>

问题解决。

在移动设备上查看时如何隐藏菜单？

4 个答案: