汉堡按钮后的菜单项过于靠近汉堡

Question

在移动/平板电脑模式下，我有一个汉堡按钮，当我单击时，菜单项将显示在其下方。

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

鉴于我需要将它们保持在甚至更低的水平，我尝试过：

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

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

You could see the problem live in my site（在移动/平板电脑模式下冲浪）。

您将如何解决？

Answer 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;
}

或将最大高度设置为父元素。

Answer 2

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

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

我注意到ir的“底部”填充为20px，在这里我告诉汉堡包选项将底部移动10px以看起来像是居中