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
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.
Finally an integrated solution!
This helps me a lot!
Thanks!
or just type no-border <ion-header no-border> and all borders should be removed!
Excelent! … its work for me 
there are some other options
<ion-header no-shadow no-border>
Thanks it worked. But not in all my pages !!!
.header-ios .toolbar-background-ios {
border-color: #669a2f;
}