导航菜单，从桌面删除项目

时间：2017-05-31 作者：Larm

使用Sailent的主题（和子主题），我试图找到一种方法，在桌面上完全删除导航栏中的菜单项。请参见此处的站点：http://www.boinginflatables.com/2017update/

It's there, although not visible如您所见，菜单项的文本不在那里，但它会弄乱菜单的对齐方式。

目前，我已将该菜单项设置为仅具有css设置的移动css类，如下所示：

.mobile-only {
        visibility:hidden;
    }
@media (min-width:992px) {
    .desktop-only {
        visibility:visible !important;
    }
}

@media (max-width: 991px) {
    .mobile-only {
        visibility:visible !important;
    }

    .desktop-only {
        visibility:hidden !important;
    }
}

2 个回复
最合适的回答,由SO网友:Johansson 整理而成

虽然这不是一个真正的WordPress问题，但是visibility 属性实际上并不隐藏任何元素。它只是淡入淡出，所以你看不到它，但它仍然为它保留了空间。您需要使用display 属性：

.mobile-only {
        display:hidden;
    }
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}

@media (max-width: 991px) {
    .mobile-only {
        display:block!important;
    }

    .desktop-only {
        display:hidden !important;
    }
}
您可能需要更改block 到inline-block 或inline, 取决于菜单项的原始值（通常是inline-block).

SO网友:ripper17

我还不能对wordpress发表评论。stackexchange。com（声誉不足…），但我想补充一下杰克·约翰逊（JackJohnsson）于2017年6月1日的回答：“的语法”；“显示”；不是“隐藏；“但是”无；。所以正确的代码是

.mobile-only {
    display:none;
}
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}

@media (max-width: 991px) {
    .mobile-only {
        display:block!important;
    }

    .desktop-only {
        display:none !important;
    }
}
“而”；“隐藏”；是正确的；可见性“；，这不是为了；显示；。看见https://developer.mozilla.org/de/docs/Web/CSS/display 对于所有可能的值。

我认为，将第一条规则移动到媒体查询中会更好，并且可能会避免您使用！关键字也很重要，但这可能取决于您的主题或其他CSS规则。

结束
标签： menus   navigation   mobile   responsive   小码农  

相关推荐

Add extra markup to WP menus

我被要求将一个HTML网站重新开发为一个WP主题，它有一个非常高级的菜单结构，我不太确定如何复制它。第二个菜单项有一个子菜单，但它不仅仅是“li”中的“ul”，还有额外的div等。。因为下拉列表有3列布局，其中2列包含子链接，第3列包含内容。这是一个示例：<ul class=\"nav navbar-nav three\"> <li class=\"dropdown yamm-fw\"> <a href=\"#\" class=\"dropdown-toggl