Bootstrap 4 Мега раскрывающееся меню не остается в контейнере при фиксированной позиции

Question

Я создал «мега-меню» в Bootstrap 4, используя панель навигации. В меню используется класс fixed-top, поэтому он всегда отображается на экране и имеет непосредственный дочерний элемент div, использующий класс container, чтобы содержимое меню находилось по центру.

Я использую следующие классы для создания мега-меню.

.megamenu-li {
    position: static;
}

.megamenu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    padding: 15px;
}

Проблема с этим подходом заключается в том, когда Вы открываете мега-меню, его содержимое go выходит за 100% ширины окна.

Вот демонстрационная версия https://jsfiddle.net/bvw9mf7d/

Как сохранить мегаменю в тех же пределах, что и div с классом container?

То, что я пробовал.

Я пытался обернуть все это в div с классом container но это не влияет на выпадение мегамену.

Я пытался изменить свое мегамену класса следующим образом

.megamenu {
    position: absolute;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 15px;
}

Какой тип работает, но не очень хорошо следует за контейнером. Вот скрипка этого попытанного решения.

https://jsfiddle.net/7Ln4zh9x/

Я создал третью демонстрацию, которая показывает, как мегаменю остается в контейнере bootstrap. https://jsfiddle.net/pgfxst5h/

Проблема с этим в том, что он не

• Фон панели навигации не расширяет всю ширину
• navbar не исправлен

Как мне добиться эффекта, которого я добиваюсь?

Любая помощь будет принята с благодарностью. Большое спасибо.

Answer 1

Если вы добавите .container внутри вашего .megamenu, вы можете ограничить ширину, но вам придется добавить еще один <div> внутри него. Используя HTML / CSS ниже, вы можете сделать фон по умолчанию родительского мегаменю прозрачным, а затем использовать любой цвет фона / границы, который вы хотите для дочернего элемента <div>, который я назвал .megamenu-inner.

* 1007. *

Обновленная скрипка: https://jsfiddle.net/q15dxj2t/1/

<div class="dropdown-menu megamenu" aria-labelledby="navbarDropdown">
    <div class="container">
        <div class="megamenu-inner">
            <div class="row">
                <div class="col-6">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-6">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </div>
    </div>
</div>

.megamenu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.megamenu-inner {
    background: red;
    padding: 15px;
    width: 100%;
}