How to make the ion-nav transparent?

Question

I want to ion header or nav transparent, so I can something like shown on the picture. But setting the background-color to transparent does not solve the problem. The content should be "fullscreen" than. If possible, the content should be behind the status bar.

Answer 1

So there are a few things you need to do. First, as Dennis said, I wrote a little tutorial for setting the headers as transparent, which you could check in detail here.

• So first you add the transparent input property to your nav-bar, which basically adds background:transparent !important to the toolbar.
• Also you can remove the border-shadow which is shown on android by adding no-border to your ion-header.
• Then you'd want to remove the top-padding on .scroll-content, so the header padding is ignored. To do so, just add top-padding: 0.
• If you wish to add a gradient layer over the slides, you'd have to work on .slide-zoom, which is generated automatically by ion-slide. You can set its height as 100% as well as width then add something like background: linear-gradient(0deg, rgba(226, 135, 106, 0.84) 0%, rgba(255, 93, 152, 0.85) 100%) !important;
• To change the bullets style you have to use .swiper-pagination-bullet and .swiper-pagination-bullet-active.

I wrote a really quick example trying to achieve what you wish:

If this is what you wish, I published a repo so you can use it as reference.

Answer 2

I have found a really nice solution: Tutorial

1. You can easy edit the ion-header: <ion-header no-border> (delete the border on android devices)
2. Add the transparent attribute to the navbar: <ion-navbar transparent>

Answer 3

This is what you're looking for:

By default, content is positioned between the headers and footers. However, using fullscreen="true", the content will be able to scroll "under" the headers and footers. At first glance the fullscreen option may not look any different than the default, however, by adding a transparency effect to a header then the content can be seen under the header as the user scrolls.

So you just need to add fullscreen="true" in your content like this

<ion-content fullscreen="true">
  <!-- ... -->
</ion-content>