Monaca Onsen UI Discord Chat Github Repo

Tabbar above Toolbar in Android?

  • Hey folks,

    Simple question, if I put the tabbar at position=“auto” here : … in Android the tabbar will go above the toolbar. I need a different title in Tab1 and Tab2 in the toolbar, so how can I do that properly (by that I mean the tabbar just below the toolbar)?

    Thank you!

  • I don’t think that type of behaviour is currently officially supported. Since the tabbar is supposed to act as a container element having some part of the page going outside might cause some strange behaviour.

    The current “normal way” of achieving what you want would be:

       <div id="tabbarTitle" class="center"></div>

    and then changing tabbarTitle's content with javascript.

    Alternatively the “css hack” way would be something like this (codepen):

    .tab-bar--material {
      top: 51px;
    .tab-bar--top__content {
      top: 0;
    .tab-bar--material__content .navigation-bar--material ~ .page__content {
      top: 102px;