css - 折叠时将元素分组到下拉菜单中

Question

我刚刚从一个站点发现了这种类型的折叠导航栏，所有菜单项都分组到一个下拉菜单中并位于右侧，它与通常的 Bootstrap 折叠导航栏不同

抱歉没有足够的声誉来发布图片

https://i.imgur.com/EFzI7hl.png

https://i.imgur.com/DhS4BlZ.png

我已经尝试了很多建议，但它并没有像他们所做的那样工作，结果总是完整的垂直下拉菜单

https://i.imgur.com/s5O7cSD.png

我的代码

<nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #0d47a1;">
        <a class="navbar-brand" href="/dashboard/">
            <img src="/images/logo.webp" width="40" height="40" alt="">
        </a>

        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Shop Manager</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Customer Care</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Messenger Order</a>
                </li>
            </ul>
        </div>
</nav>

Answer 1

您需要添加一些自定义 CSS 以使菜单小于全宽:

.navbar-collapse {
  position: absolute;
  right: 0;
  top: 40px;
  background-color: #333;
}

@media (min-width: 768px) {
  .navbar-collapse {
    background-color: transparent;
    position: initial; /* Using 'initial' here rather than specificing 'relative'.*/
  }
}

这是一个fiddle显示它工作。您可以在那里自定义它，使其看起来像您提供的示例，但这是粗略的想法。