How to remove toolbar border in Ionic 5?

Ionic Framework ionic-v3
1

My solution worked fine in Ionic 4 but now it is no longer working.

I have tried all of the following:

ion-toolbar{
  --color: var(--ion-color-primary-contrast);
  --background: transparent;
  --ion-color-base: transparent !important;
  --border-style: none!important;
  --padding-bottom: 0;
  --border-color: transparent !important;
  border: 0px !important;
  border-bottom-color: transparent !important;
  background-image: none !important;
  border-bottom: none !important;
}

toolbar

2

Try

ion-header::after {
  display: none;
}
5 Likes
3

Word from the top!
Works a treat, thanks.

1 Like
4

Hi, max
It works on Android but not working on IOS. Could you give me some advice?

5

I think you can add ion-no-border class to the <ion-header>:

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Header Toolbar</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h1>Content</h1>
</ion-content>

This method works on both iOS and Android.

2 Likes
6

I think this is the best “IONIC” answer :+1: :+1: :+1: :+1: