How to remove shadows from navbar?

How could I remove the shadows from a navbar?

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


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

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


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

<ion-header no-shadow>

ionic 3:

<ion-header no-border>

Removes both the border and the shadow.


how to set it for all header accross pages

1 Like

@neomib Super great solution. thanks

1 Like

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

Thank you man, your code works for me.

work for me in ionic 4 Tanks

This works on ionic 4 too, thanks!

Thanks working fine in ionic 5 also

1 Like

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

<ion-header class="ion-no-border">

<ion-footer class="ion-no-border">

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

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