大型菜单下拉菜单的宽度答案

【问题标题】：Width on mega menu dropdown大型菜单下拉菜单的宽度
【发布时间】：2018-09-12 01:00:05
【问题描述】：

我有一个菜单栏，里面占了一整行：网站图片之前。

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

我添加了这个 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 菜单在桌面和移动视图上都非常小。网站在这里：

我希望下拉菜单的宽度与图片上的相同。但我不知道在哪里设置宽度？

【问题讨论】：

标签： html css wordpress

【解决方案1】：

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

如果我应用样式

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

我明白了...

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

这个菜单很容易通过 ftp 和 flex-box 重建。我会这样做或尝试使用不同的插件。

【讨论】：

感谢您的建议。我只是尝试添加您的代码，但我没有得到任何更改？我认为我目前没有能力使用 flexbox 制作它。我想学习，但我有一位客户正在推动尽快将菜单放在正确的位置。
可以理解。我给你的代码无论如何都没有反应。另外，我怀疑您的客户会对他们的徽标和购物车被切断感到兴奋。
同意约翰，他会对此很生气 :-) 老实说，我实际上不知道这很难解决。我应该从一开始就研究 flexbox。但他也想编辑菜单，他不能编码。所以我需要一个插件。
在我制作 flexbox 之前，我可以向您展示它的外观吗？也许你有一个建议。
当然！我建议也许找到另一个菜单插件。这可能是最简单的解决方案。

【解决方案2】：

添加到header .container 的display:flex 导致了这种情况。要解决这个问题，您应该移除 flex 样式并将徽标和购物车放置在绝对位置。

.container>.navbar-header {
    position: absolute;
    top: 0;
    left: 160px;
}
.container>.navbar-collapse {
    margin-top: 85px;
    margin-left: 75px;
}
.themo_cart_icon {
    position: absolute;
    top: 0;
    right: 160px;
}

【讨论】：

非常感谢@Hareesh 的建议。我只是尝试将您的代码添加到页面中。菜单现在看起来不错，但是徽标、菜单和购物车在这个解决方案中完全跳动？
这个解决方案也没有响应？我可以看到菜单在移动视图的徽标后面居中。
您必须添加必要的样式才能在移动屏幕中查看。
@MK-DK 你能详细说明一下吗？我不确定我是否理解问题到底是什么。
是的，确定。我想要一条漂亮的直线上的徽标、菜单和购物车。 @John Sims 图片的确切情况。但解决方案也必须是响应式的。我添加了您的代码，但徽标、菜单和购物车没有对齐。