How to remove shadows from navbar?

Ionic Framework ionic-v3
1

How could I remove the shadows from a navbar?

2

For Ionic 1 or Ionic 2? Are you looking for the CSS that you would override?

Chris

3

Ionic 2. I’m looking for any way to remove shadows.

4

Simply add
ion-header::after {
background-image: none;
}

to your page’s scss file. You might want to apply in a more global fashion

Some other variations that you might want to override are:

ion-header::after, [tabsPlacement=“top”] > ion-tabbar::after, ion-footer::before, [tabsPlacement=“bottom”] > ion-tabbar::before

11 Likes
5

I’m using Beta 11 and this is what I did to get rid of the shadows -

<ion-header no-shadow>
    <ion-navbar>
        <ion-title>Title</ion-title>
    </ion-navbar>
</ion-header>
4 Likes
6

ionic 3:

<ion-header no-border>
</ion-header>

Removes both the border and the shadow.

28 Likes
7

how to set it for all header accross pages

1 Like
8

@neomib Super great solution. thanks

1 Like
9

no-border works great! no-shadow didn`t worked for me. Thank you :grinning:

10

Thank you man, your code works for me.

11

work for me in ionic 4 Tanks

12

This works on ionic 4 too, thanks!

13

Thanks working fine in ionic 5 also

1 Like
14

In ionic 5 you can do it like this (simplest and cleanest way):

<ion-header class="ion-no-border">
    {...}
</ion-header>

<ion-footer class="ion-no-border">
    {...}
</ion-footer>
7 Likes
15

Thanks. I never think it is a “border” as it is shadow in android.

16

Just add class=“ion-no-border” for ionic 5 , Works fine !