如何使大型菜单占据整个页面宽度？

我试图使大型菜单占据整个页面宽度。我几乎尝试了所有可以做的事情。

链接到测试站点

#1

是你的容器决定了Mega Menu的宽度。你需要使其与其父div分开。

将此添加到主题的自定义CSS或子主题CSS中

@media (min-width: 1200px) /* You might have to add the code for other screen sizes too depending on your theme */
.sf-menu .megamenu .megamenu_wrap {
    position: fixed;
    z-index: 999;
    width: 100%;
    margin-top: 30px;
}

@media (min-width: 992px) /* You might have to add the code for other screen sizes too depending on your theme */
.sf-menu .megamenu .megamenu_wrap {
   left: 0;
}

/* Use !important where necessary if the changes do not reflect on your site. Refrain from using it unless absolutely necessary. */

希望这可以帮助。我已经在Chrome中使用Inspect在你的测试站点上测试了上面的代码。

切记, 请仅编辑你的子主题或主题中提供的自定义CSS框。从来没有核心主题。

#2

如果我理解正确, 那么你的问题是大型菜单的对齐方式, 如果你将大型菜单设置为100vw, 那么它将向右对齐。

发生这种情况是由于你的div.lm-col-12

职位：相对

相对位置将强制在任何子元素中使用的任何位置都具有从该位置开始的根位置。

尽量避免该特定位置的相对声明。尝试将类的位置设置为静态。