Search code examples
csstwitter-bootstrap-3sticky

Affix hide top when active

I have a navbar and wanted to apply affix, but only to half of that navbar. The whole thing is 1 solid block. I figured that when affix is active I could try to set the top attribute to a negative number and get rid of that upper part of navbar. I just don't know how to do this. Any suggestion is welcomed.

So this is what I tried:

<nav id="header-nav" data-spy="affix" data-offset-top="50">
     <div class="row1"></div>
     <div class="row2"></div>
</nav>

The CSS for this is:

.row1{
padding-top: 10px;
}

.row2 {
    padding-bottom: 20px;
}

.affix {
    top: -10px;
    width: 100%;
}

#header-nav.affix {
    position: absolute;
    top: -50px;
}

But apparently top doesn't seem to change anything at all.

Solution

  • It actually works just putting margin-top: -50px; in .affix class. The problem was that the G.Chrome decides to use the old CSS than the new one sometimes. I just ran it from inspect element->network with "Disable cache" checked.

    Only this is needed in CSS:

    .affix {
    margin-top: -50px;
    width: 100%;
}