Affixed top navbar covers anchor's content

Question

It's a landing page with fixed navbar and anchors in a content using bootstrap scrollspy and affix. I have added affix on my top navbar via data attributes. Everything is working well, except that affixed top navbar covers top of the content.

This is how it is at this moment:

And this is how it should be:

navbar code:

<!-- navbar section -->

<nav id="navbar-scrollspy" class="navbar navbar-default" data-spy="affix" data-offset-top="58" data-offset-bottom="200">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#first_round"><strong>ГЛАВНАЯ</strong></a></li>
                <li><a href="#second_round">КАК ЭТО <strong>РАБОТАЕТ</strong></a></li>
                <li><a href="#third_round">КАК ПОЛУЧИТЬ <strong>ЗАЙМ</a></strong></li>
                <li><a href="#fourth_round">КАК ВЕРНУТЬ <strong>ЗАЙМ</a></strong></li>
                <li><a href="#fifth_round">ОТЗЫВЫ <strong>О НАС</a></strong></li>
            </ul>
        </div>
    </div>
</nav>

Here's live example: http://zaim.wvb.io/

zipzit · Answer 1 · 2016-01-15T06:38:06.580

Remember as you scroll, the navbar-scrollspy element changes its classes.. With scroll at the top of the screen the classes available are class="navbar navbar-default affix-top" After you scroll down a bit, the classes change to class="navbar navbar-default affix" Because that top element flips from position: relative to position: fixed, the bottom margin gets wonky.

I'd rather see you add a margin top (45px?) to class="container form-itself" and reduce the margin-bottom from the class navbar (from 45px to 0). That would protect you everywhere.

Oops. and speaking of wonky. That same menu needs some work in mobile, but I'm guessing you haven't gotten there yet. I share your pain.

I have updated the link. I have this css rule already: ``` #navbar-scrollspy.affix { position: fixed; top: 0; width: 100%; z-index: 10; } ``` — Alexander Kim, Jan 15 '16 at 06:26

Affixed top navbar covers anchor's content

1 Answers1