Is it possible to get content above nav bar? Similar to how http://ionicframework.com/docs/api/directive/ionNavView/ example shows the HTML/JS/Result section above the rest of the page? I noticed they use an iFrame to accomlish this, but was wondering if there was a way without it?
Hi,
Yes, it is possible.
Here is one example where Ionic base classes (.bar-header and .has-header) have been changed to accommodate custom header on top:
Although the codepen above shows the content above a header, my question really pertained to the navbar and the tabs below it (much like the link I posted). If I make the changes above then the tabs (on iOS) get pushed below the bottom of the screen.
See this code pen - note half the tab is pushed below the screen. CodePen
In this case you also need to change .has-tabs and .tabs Ionic classes, like in this example:
Note: It will probably not look ok in codepan, but if you use it locally in Chrome with device emulation or real device it will be ok. This is because I’ve added .platform-ios class in order to only target iOS devices.
If you use SCSS than you can put height of the custom header in a variable and then it will apply to all the classes accordingly, so you don’t have to manually calculate height:
I’ve tested this on both Android and iOS and it works ok.