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

Question

我正在尝试使大型菜单占据整个页面宽度。 我几乎尝试了所有可以解决的问题。

Link to testing site

Answer 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框。从来没有核心主题。

Answer 2

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

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

位置：相对；

相对位置将强制任何子元素中使用的任何位置都从该位置获得其根位置。

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