Remove Borders from Toolbar / NavBar iOS

#1

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:

What I want: (sort of like android)

Thanks

1 Like
#2

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

.toolbar-background {
    border: none;
}
#3

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.

#5

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.

#6

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.

#7

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

#8

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

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

#10

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

#11

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

8 Likes
#12

Excelent! … its work for me :smiley:

#13

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

5 Likes
#14

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

#15

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