Angular Js Bootstrap Navbar scrolling issue

Question

I am trying to implement Angular js + Bootstrap3 for mobile. I have added navbar (navbar-fixed-top) in index.html file and there are some forms getting loaded through partials/myfom.html. When I scroll the page and if a textbox is just behind the navbar, on click of navbar it opens keypad for textbox on mobile.

Can anyone please help me to suppress events of any controll which goes behind navbar after scrolling ?

Code -------

<snap-drawers>
  <div snap-drawer="right">
       <!-- some content -->
  </div>
</snap-drawers>


<snap-content>
  <div id="main-mobile-frame">
    <div class="app">
      <!-- Navbars -->
          <nav class="navbar navbar-default navbar-fixed-top my-top-bar" role="navigation">              
              <span class="head-title"><a href="#/home">Welcome</a></span>

              <div class="bg-reg-shadow btn-group pull-left top-menu-buttons">
                <div class="btn btn-navbar sidebar-toggle" id="menu_bars_id" snap-toggle>
                  <i class="glyphicon glyphicon-align-justify"></i>
                </div>
              </div>

              <div class="bg-reg-shadow btn-group pull-right top-menu-buttons" yield-to="navbarAction">
                <div  snap-toggle="right" class="btn btn-navbar"  id="right_plus_id">
                  <i class="glyphicon glyphicon-plus"></i>
                </div>
              </div>
        </nav>
        <div class="app-body scrollable">
               <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>              
       </div>
    </div>
      <ng-view ></ng-view>
    </div>  

</snap-content>

Answer 1

You have to add a style="margin-top: XXpx;" style to the app-body the same height or more as the nav-bar, however that means you need to explicitly define your nav-bar height - I have not yet discovered a way to make this responsive.