如何在移动导航的菜单中隐藏其中一些页面？

【问题标题】：How to hide some of these pages in the menu on mobile navigation?如何在移动导航的菜单中隐藏其中一些页面？
【发布时间】：2019-10-12 18:29:02
【问题描述】：

我想将移动导航上的菜单选项更改为只有“主页”、“工作”和“联系人”。

每个菜单项都有一个我试图隐藏的菜单 ID：

@media screen and (max-width: 600px) {
  li#menu-item-14209 { 
    display: none;
  }
}

和其他类似的媒体屏幕查询。菜单项在桌面版本上消失，但在移动版本上永远不会消失，即使我没有指定媒体查询。

li#menu-item-14209 是菜单项的 CSS。

【问题讨论】：

【解决方案1】：

那是因为您的移动菜单与桌面菜单不同，并且没有类。您可以像这样使用:nth-child 选择器：

.slicknav_nav li:nth-child(X) {
display: none;
}

其中 (X) 是来自顶部的移动菜单中的元素的编号。

这是 CSS 只留下“Home”、“Jobs”和“Contact”。

.slicknav_nav li:nth-child(2), .slicknav_nav li:nth-child(3), .slicknav_nav li:nth-child(5) {
display: none;
}

【讨论】：