How to remove shadows from navbar?


#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


#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>

#6

ionic 3:

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

Removes both the border and the shadow.


#7

how to set it for all header accross pages


#8

@neomib Super great solution. thanks


#9

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


#10

Thank you man, your code works for me.