移动模式我没有获得带有关闭按钮的全宽菜单

Posted 2023-05-08

【中文标题】移动模式我没有获得带有关闭按钮的全宽菜单

【英文标题】：mobile mode i am not getting full width menu with close button

【发布时间】：2021-11-11 03:05:07

【问题描述】：

团队，

我正在研究响应式菜单，我在移动模式下获得小尺寸的菜单，但没有关闭按钮的全宽。

这是我的图片供参考。

这里是jsfiddle

这是我的代码

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="images/GEPL-Capital-Logo.webp"></a>

        <button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
        <div class="collapse navbar-collapse top_nav" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto ">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                    <hr class="hr_nav">
                </li>
                <li class="nav-item "><a href="#" class="nav-link">About Us</a>
                </li>
                <li class="nav-item "><a href="#" class="nav-link">Support</a>
                </li>
                <li class="nav-item "><a href="#" class="nav-link">Contact Us</a>
                </li>
            </ul>
            <ul class="navbar navbar-nav navbar-right" style="display:flex;">
                <li>
                    <button class="btn top_login">
                    Login
                </button>
                </li>
                <li>
                    <button class="btn sign_btn">
                    SignUp
                </button>
                </li>
            </ul>
        </div>
    </div>
</nav>

请让我知道我做错了什么。我正在使用bootstrap 5.0.2

【参考方案1】：

我删除了

.top_nav margin-left: 204px!important;

并添加

.top_nav     
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    left: 0;
    padding-top: 70px;
    z-index: -1;

这是更新的链接jsfiddle

UPDATE jsfiddle

link

【讨论】：

感谢您的回答，但这不是我例外当用户单击三个图标菜单时，用户应该查看整个页面的菜单，顶部带有 X 图标以关闭菜单

好的，明白了。

请检查更新的 jsfiddle 链接