How to add custom tabs at the top of a page?



i have a simple page

i am trying to have the tabs be stuck to the header and the content to flow underneath. Right now no matter where i place it the content doesn’t flow properly under the tabs

any ideas?


Take the tabs out of the ion-content like the following:

 <ion-header-bar class="bar-positive">
   <h1 class="title">Home</h1>

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
  <div class="tabs">
    <a class="tab-item active" href="#">
      <i class="icon ion-home"></i> Test
      <a class="tab-item" href="#">
      <i class="icon ion-star"></i> Favorites
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i> Settings

  <ion-content style="padding-top:48px">


sure, but then the content starts from under the tabs…


Isn’t that what you wanted?


i meant that the content starts hidden under the tabs, and not below the tabs.

sorry for missunderstanding


Notice that I have a padding-top:48px on the ion-content tag. Try it in your CodePen.

Edit: I forked your CodePen… here it is with the changes.

Let me know if that resolved your issue.

~ Brad


thanks for the update.

i was thinking that there is a build in css rule or some kind of div arrangement that would fix this issue without the need to add custom styles.

but this works, nevertheless


Good stuff, glad it worked.

~ Brad