Keep tabs at top (don't scroll), with image backgrounds (not icons)?

How can I keep tabs at the top, so that they don’t scroll with content, and put images in the backgrounds (not icons)?

Haven’t try this yet
How about put the tap element in the ion-header or something like that. ( not in ion-content )

Ok. How can I do that without screwing up the height of the ion-content below, just for this 1 page that also needs these top tabs (in addition to its bottom tabs, btw)?

have you put this one attribute?

<ion-content .... has-header="true" ....>

Yes, but will that automatically determine the actual height of the header? IIRC, between iOS and Android, for example, this wouldn’t be sufficient if you mess with the header outside of the main ionic way to do so.

I’ll try it though and update you

I’ve found something interesting try check this
Header + Tabs (top) = cut off top content

he use this one

<ion-tabs class="tabs-top" ...>

and if you want to use tab with icon

<ion-tabs class="tabs-icon-top" ...>

Hope this help!

So a little late to this, but I think this is more of what you are looking for.

1 Like

@mhartington can this work with background images and not icons? quick example maybe?

Of course it can :smile:

1 Like

How should I reposition those images if I wanted them flush against the bottom of the bar, actually with a little arrow sticking down just below the bar for the selected ‘tab’? and… further apart, etc etc? I mean, I can run over some CSS, but what’s the good ionic way to do it?

Well ionic is just html, js. and css…
so css is the way to go