CODEWITHSUNDEEP
cssionic2
Hamza L.
Hamza L.

Reputation: 1823

CSS - Can't have a fixed navBar

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.

So far, it works perfectly in chrome; however, when I run it on the device (Safari) the whole view becomes scrollable.

My implementation so far:

HTML:

        <ion-content id="contentPadding" class="outlet">
        <div class="top">
        <div class="imagebk" [ngStyle]="{'background-image': 'url('+outlet.mainPhoto?.url+')'}"><div class="bk"></div></div>
        <div class="fixedTitle">
          <div class="outletName">{{outlet.resName | uppercase}}</div>
        </div>
        <ion-row id="rowPadding">
          <ion-col id="overviewTab" width-50>
          <div>TAB 1</div>
          </ion-col>

          <ion-col id="menuTab" (click)="showModal(outlet)" width-50>
          <div>TAB 2</div>
          </ion-col>
        </ion-row>
        </div>
       .....
     <div class="secondDiv"></div>
     </ion-content>

CSS:

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

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.

Upvotes: 1

Views: 68

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Why don't you try with an ion-toolbar? According to Ionic2 docs:

A Toolbar is a generic bar that is positioned above or below content. Unlike a Navbar, a toolbar can be used as a subheader. When toolbars are placed within an <ion-header> or <ion-footer>, the toolbars stay fixed in their respective location.

Also notice that

When placed within <ion-content>, toolbars will scroll with the content.

So instead of trying to put that code inside the ion-content, you should try by putting it inside a ion-toolbar, but including that ion-toolbar inside the ion-header and not in the ion-content.

Upvotes: 1

Related Questions