Bootstrap 3 navbar not fixed to bottom when scrolling in ios

Question

I'm using -viewport-overflow-scroll: touch; overflow: auto; to be able to use the momentum scroll in ios but I having problem with the bootstrap navbar. When I scroll in ios the navbar stays in the middle of the page until I stop scrolling, then a few seconds later it sticks to the bottom again. Any ideas? The navbar is inside the div with the scroll touch. This is the navbar:

<nav class="navbar navbar-fixed-bottom footer">
    <div class="pull-left footer-text">
        <span>All rights reserved</span>
    </div>
    <div class="pull-right footer-icons">
        <img class="footer-icon" />
        <img class="footer-icon" />
    </div>
</nav>


.footer{
min-height:1em;
bottom:0;
background-color: #35AEEE;
right: 0;
left: 0;
color: white;
}

Hewlett Hewlett · Accepted Answer · 2017-02-23T15:51:43

Since you have bottom: 0;, you can add position: absolute; property to make it sticks to the bottom of the page.

.footer {
  min-height: 1em;
  bottom: 0;
  background-color: #35AEEE;
  right: 0;
  left: 0;
  color: white;
  position: absolute;
}

<nav class="navbar navbar-fixed-bottom footer">
  <div class="pull-left footer-text">
    <span>All rights reserved</span>
  </div>
  <div class="pull-right footer-icons">
    <img class="footer-icon" />
    <img class="footer-icon" />
  </div>
</nav>

Bootstrap 3 navbar not fixed to bottom when scrolling in ios

1 Answers