1

Based on the Bootstrap template unify (http://htmlstream.com/unify/) I would like to display a sticky div on top of the page. My current solution displays the div, but the navbar is hidden behind the new div (overlaps). I really intend to shift the whole page down by the size of the div such that the navbar and the new div are fully visible. My div might look something like this:

<div id="savebutton" class="service navbar-fixed-top" style="cursor:pointer;
       border-style:   groove;background-color:#e74c3c;color:white">
    <span class="glyphicon glyphicon-save" style="font-size:24px;display:inline;">
        <h4 class="desc" style="display:inline;">SAVE CHANGES</h4>
    </span>
</div>

When I use the class="top", the new div appears correctly, but as I scroll down the page it obviously scrolls away. A combination of top and navbar-fixed-top does not work for me.

In a few words: how can I have a sticky div before the navbar? The class navbar-fixed-top seems to overlap my divs.

henrywright
  • 10,070
  • 23
  • 89
  • 150
shaft
  • 2,147
  • 2
  • 22
  • 38

0 Answers0