Remove Borders from Toolbar / NavBar iOS

Hello,

I have a navbar with title and buttons and then below that I have a toolbar with a segment. By default, iOS has borders around both the toobar and navbar, but I really don’t want them around. Is there a workaround to doing that?

What I have:
image

What I want: (sort of like android)
image

Thanks

1 Like

Just remove them by overriding some CSS variables. Example for the top toolbar:

.toolbar-background {
    border: none;
}

I already tried that, and along with it all the ionic 1 tricks like transparent background image, 0px margins, everything. Still the borders wouldn’t go.

How about just checking it in to inspect element? If you do not understand what the priority CSS, so you can use !Important (This is a bad practice).

PS The @luukschoen answer is correct.

I checked it in inspect element and tried changing values there but nothing happened. Also, I’ve tried important on all the css rules but still nothing happens.

I used this custom css
.toolbar.no-border, .navbar.no-border{
.toolbar-background{
border:0;
}
}

in beta.10
ios only: ion-toolbar/ion-navbar will always have borders to both the top and bottom of the element. Use the attributes no-border-top and no-border-bottom to remove the respective borders.

3 Likes

Finally an integrated solution!
This helps me a lot!
Thanks!

Thanks @ahmed_s! That really removed the border from the navbar.

or just type no-border <ion-header no-border> and all borders should be removed!

8 Likes

Excelent! … its work for me :smiley:

there are some other options
<ion-header no-shadow no-border>

5 Likes

Thanks it worked. But not in all my pages !!!

.header-ios .toolbar-background-ios {
border-color: #669a2f;
}