如何停止bootstrap4粘性导航栏中的重叠

时间:2019-09-08 05:43:52

标签: bootstrap-4 jquery-3

我也用bootstrap-4制作了导航栏粘性顶部和scrollspying。有一些href标记与body.s的某个部分相关联。我的问题是,当我单击某个菜单项时,侦听效果很好,但导航栏与目标部分重叠。 我的导航栏高度为95px,我也将data-offset设置为“ 95”,但问题仍然没有解决。我想让所有部分都在导航栏非常快的情况下。我该怎么做? 这是我的代码...

<body  data-spy="scroll" data-target="#spy" data-offset="105">
    <section>
        <div class="header_top container">
            <p class="pt-sm-2">
            <span>Call Us: <a href="tel:+8801797944174">+8801797944174</a></span>
            <span class="pl-sm-5 d-block d-sm-inline">Email Us: <a href="mailto:jibonerasa9@gmail.com">mdabubased@gmail.com</a></span>
            </p>
            <form class="form-inline float-right" action="" method="">
                <div class="input-group">                    
                    <input type="text" class="form-control" placeholder="">
                    <div class="input-group-append">
                        <button type="button" class="btn"><img src="images/searchicon.png" alt=""></button>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <header class="sticky-top">
        <div class="nav_bg" id="spy">
            <nav class="navbar navbar-expand-md justify-content-between container">
                <a class="navbar-brand logo" href="javascript:voild(0)"><h1>Allrounder</h1></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="fas fa-bars text-white"></i></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav ml-auto text-uppercase">
                        <a class="nav-item nav-link active" href="#shout">HOMEPAGE<br><span>test text here</span></a>
                        <a class="nav-item nav-link" href="#latest_work">STYLE DEMO<br><span>test text here</span></a>
                        <a class="nav-item nav-link" href="#content1">full width<br><span>test text here</span></a>
                        <a class="nav-item nav-link" href="#content">portfolio<br><span>test text here</span></a>
                        <a class="nav-item nav-link" href="#content2">gallery<br><span>test text here</span></a>
                        <a class="nav-item nav-link" href="#footer">dropdown<br><span>test text here</span></a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

0 个答案:

没有答案