How to get content under navbar


#1

I can’t figure this out and all my searches came with no applicable result.

I’m using side menu starter app as a base for my app. On some screens I want content to be under top navbar. Imagine that on top of the screen I have big image header and I want navbar to be transparent and “inside” of that image.

Like so:

I tried removing “has-header” from content area, I tried adding “background: none” to navbar … but I still have white header everywhere and content below it.

I’m new to Ionic so please excuse me if this is lame question that has been answered million times. I found some similar topics in this forums but they all refer to old CodePens that don’t exist anymore.

Any help would be much appreciated. Thanks.


#2

If you setup a codepen with your current code, I could make some time to help you with code :smile:

Basically, what you need to do is write some custom css. First of all, make the header transparent. Second of all, make the content area start at top:0 (I’m a bit curious how this turns out on the ios7 status bar though, so you should test this). The content area defaultly starts at top: x, where x stands for the height of a topbar.

I wrote this out of memory though, might be pretty wrong, but from memory I thought this is the way to go. If you create a codepen I will demonstrate (even if I’m wrong now, because I could check by then ;))


#3

Thanks for your prompt answer. Seems like you pointed me to right direction.

For some reason my <ion-content> is getting “has-header” class assigned to it even though I don’t specify this anywhere. When I override this in css/inline style and assign “top: 0” to it then everything works exactly as I want.

I might setup that CodePen later anyway because I’d like to know if there’s any cleaner solution. But this works for me now. Thanks a lot.


#4

Glad you was able to fix your problem! Maybe you could indeed add a codepen for future topic visitors with the same question :wink: Like you couldn’t find it, maybe they will be able to then :smile: