汉堡按钮后的菜单项离汉堡太近答案

【问题标题】：Menu items after burger button too close to burger汉堡按钮后的菜单项离汉堡太近
【发布时间】：2018-08-24 03:53:01
【问题描述】：

在手机/平板电脑模式下，我有一个汉堡按钮，当我点击它时，菜单项会出现在它的下方。

出现的菜单项与汉堡太接近，导致用户体验问题。

考虑到我需要他们更低于，我尝试了：

#burger {margin-bottom: 20px}
media screen and (min-width: 768px) {
    #burger {margin-bottom: 0}
}

这不好，因为它放大整个菜单区域 (#menu-primary)。定位菜单项本身也可以做到这一点...

你会怎么解决？

【问题讨论】：

【解决方案1】：

您可以定位列表项中的第一个子项，例如：

.menu li:first-child {
margin-top: 20px;
}

如果您不想增加菜单栏的大小，可以在此处删除填充。我已删除 20px 并将其更改为零。

@media (max-width: 767px)
.elementor-14 .elementor-element.elementor-element-49f59133 {
padding: 20px 0px 0px 0px;
}

或者为父元素设置一个最大高度。

【讨论】：

【解决方案2】：

我不确定我是否理解正确，但我想垂直对齐压缩菜单。请尝试此代码并告诉我这是否解决了您的问题

.elementor-element.elementor-element-7955b736.elementor-widget.elementor-widget-wp-widget-nav_menu {
    position: relative;
    top: 10px;
}

我注意到有一个 20px 的“底部”填充，这里我告诉汉堡包选项移动 10px 底部看起来像完全居中

【讨论】：