在最小化浏览器时，内联块不会阻止菜单元素重叠

Question

我创建了一个菜单，其中的每个链接都具有相同的ID #menuu和类.menu-item。我还没有编写任何HTML，因为它是使用实时页面构建器创建的。

我有以下CSS：

#menuu { 
text-decoration: none; 
color: #0B1B70; 
} 

.menu-item-text {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11 pxpx solid transparent; 
border-top: 2.11 pxpx solid transparent; 
padding: 0px; 
height: 35px 
}


#menuu:hover .menu-item-text, 
#menuu:focus .menu-item-text, 
#menuu:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

.active { border-bottom: 2.11px solid #61f6ff !important; 
border-top: 2.11px solid #61f6ff !important; }

#menuu
{
min-width: 60pxpx;
max-width: 235.97px;
width: 100%;
padding-left: 5%;
padding right: 5%;
white-space: nowrap;
position: inline-block
display: flex;
justify-content: center;
align-items: center;

}

我希望在最小化浏览器宽度时防止菜单项相互重叠。现在他们都去了页面的中心，互相覆盖。您可以在此处查看：mayabarber.co.il。显示：内联块由于某种原因不起作用。

谢谢！

Answer 1

第一个问题：不要使用重复的ID =不要在页面上多次使用id。因此，请删除所有#menuu ID并改为调整类的样式。

菜单与一些小部件位于同一行（例如社交图标，电话号码等），这就是为什么它没有足够的空间。

您可以使用992px的媒体查询（问题开始的地方）以不同的方式解决您的问题（不确定哪种情况最适合您的情况）

@media only screen and (max-width:992px) {
    styles here
}

• 更改菜单项和/或小部件文本的字体大小 font-size

• 全部隐藏小部件display:none

• 将colums的宽度更改为一行3或任何你       例如：.elementor-166 .elementor-element.elementor-element-462f96df { width:33.33%}

• 使所有列的宽度均为100％，因为当您通过768px时会发生这种情况       例如.elementor-column { width:100%!important;}

无论如何，我的猜测是你可以用media queries和不同的样式来解决这个问题，具体取决于屏幕大小。

Answer 2

正如您在图片中看到的那样，有一些内联样式应用于elementor-element，这就是重叠问题。但是我认为在计算页面宽度后，页面加载的动态是动态的，而你与此无关。但你可以做的就是重写这种风格。