title: CSS - Can't have a fixed navBar
body: <p>I am developing an app with IONIC2 framework, now I need to create a fixed navbar that sticks to the top of the screen; however, I was not lucky enough to make work.</p>
  
  <p>So far, it works perfectly in chrome; however, when I run it on the device (Safari) the whole view becomes scrollable.</p>
  
  <p>My implementation so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;ion-content id="contentPadding" class="outlet"&gt;
          &lt;div class="top"&gt;
          &lt;div class="imagebk" [ngStyle]="{'background-image': 'url('+outlet.mainPhoto?.url+')'}"&gt;&lt;div class="bk"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="fixedTitle"&gt;
            &lt;div class="outletName"&gt;{{outlet.resName | uppercase}}&lt;/div&gt;
          &lt;/div&gt;
          &lt;ion-row id="rowPadding"&gt;
            &lt;ion-col id="overviewTab" width-50&gt;
            &lt;div&gt;TAB 1&lt;/div&gt;
            &lt;/ion-col&gt;
  
            &lt;ion-col id="menuTab" (click)="showModal(outlet)" width-50&gt;
            &lt;div&gt;TAB 2&lt;/div&gt;
            &lt;/ion-col&gt;
          &lt;/ion-row&gt;
          &lt;/div&gt;
         .....
       &lt;div class="secondDiv"&gt;&lt;/div&gt;
       &lt;/ion-content&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>   .top{
      position: fixed !important;
      top:0;
       }
  
      .fixedTitle{
        position: fixed;
        width: 100%;
        text-align: center;
        margin-top: 13%;
        left: 50%;
        z-index: 101;
        transform: translateX(-50%);
       }
  
       #rowPadding{
      padding:50% 0 0vh 0;
      position: fixed;
     transform: translateX(0px);
     z-index: 5;
      }
  </code></pre>
  
  <p>With the above implementation when I scroll up/down on the device (iOS) the whole page goes up and down, and the navBar is not sticked to the top.</p>