CODEWITHSUNDEEP
htmlioscsstwitter-bootstrap-3navbar
lin001
lin001

Reputation: 33

Bootstrap 3 navbar not fixed to bottom when scrolling in ios

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;
}

Upvotes: 0

Views: 1264

Answers (1)

Hewlett
Hewlett

Reputation: 161

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>

Upvotes: 0

Related Questions