巨型菜单下拉列表的宽度

Question

我有一个整整一行的菜单栏： 在网站形象之前。

我希望菜单栏位于徽标和购物车之间。我通过以下方式解决了这个问题：

我添加了这个CSS：

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 600px) { 
    .navbar-header { width:100%} 
}

并更改了html代码中的原始序列：

<div class="navbar-header">
if(th_is_woocommerce_activated()) // Shopping cart
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">

到

<div class="navbar-header">
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
if(th_is_woocommerce_activated()) // Shopping cart

这部分解决了这个问题。但是现在桌面和移动视图上的Mega菜单都非常小。该网站在这里：

我希望dropmenu获得与图片相同的宽度。但我无法弄清楚在哪里设置宽度？

Answer 1

问题在于，因为您将display设置为flex并且因为下拉列表的宽度是相对于父级的，所以将宽度设置为整个菜单的宽度并不容易。

如果我应用样式

.mega-sub-menu {
   width: 1200px;
   position: absolute;
   left: -200px;
}

我明白了......

由于多种原因，这是有问题的。

使用flex-box通过ftp重建这个菜单非常简单。我会这样做或尝试使用不同的插件。

Answer 2

添加到display:flex的{​​{1}}导致了这种情况。 要解决此问题，您应该删除flex样式并将徽标和购物车放在绝对位置。

header .container