i might specify my intentions a bit, since the screenshot is quiet confusion and not really what i want to achieve - since i am not really familar (or did not made it work) with how to style the onsen ui elements right i am not able to style neither the tabbar nor the toolbar to achieve the following:

I just want to have a normal Toolbar, after that, there should be some fixed content, which should be the same within all the following tabs (like a header of the tabbar - in here called “Material is Good”), after that should follow the normal tabbar and after that there should be the pageContent.

<Toolbar>
<fixed Content with specified height and maybe an image or some text in it or whatever>
<Tabbar>
<TabbarPages>

So what i am not able to reproduce is the fixed content, since the tabbar will always be right below the toolbar or - if i choose to place it on the bottom - on the bottom, however, this results in having the page of the tabbar start right below the toolbar.

Maybe it is possible to append some fixed header to the tabbar? Might you provide some example code?

I’ve given the header the class my-header and the tabbar the class with-header.

Then just put this in your CSS:

.my-header {
height: 40px; /* or whatever height you want */
}
.with-header .tabbar {
top: 40px; /* usually top is 0px so this is 0px + the height of the header */
}
.with-header .tabbar__content {
top: 89px; /* usually top is 49px so this is 49px + the height of the header */
}

By the way, this assumes that you are only developing for Android. If you are developing for iOS you’ll need to do some extra checks so the custom style doesn’t get applied there (because tabbar is usually on the bottom in iOS).