Search code examples
onsen-ui

Onsen - multiline toolbar

Can I have a multi line toolbar?

I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header. It is possible to do that?

Thank you!

Solution

  • You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar

    It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs

    Hope it helps!

    Edit: some CSS to do this...

    • Fix the position to the top under a main toolbar: position: fixed; top: 44px;

    • Change the page content so the new toolbar does not overlap with it: ons-toolbar ~ .page__content { top: 88px; }

    Working here: http://codepen.io/frankdiox/pen/YXKyjX