CODEWITHSUNDEEP
htmlcssborderionic-framework
N4pst3r
N4pst3r

Reputation: 658

remove border bottom in ion header

I have a problem trying to remove ion header border bottom in my ionic app

you could see my ionic header with border here

Here is the code of tab-home.html:

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
            <!--<ion-nav-bar class="bar-transparent">
            </ion-nav-bar>-->
            <ion-pane ng-controller="CardsCtrl">
            <!--<ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon ion-navicon"></button>
            </ion-nav-buttons>-->
            <td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
            <div class="image">
            <!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
            <img ng-src="{{card.image}}">
            <!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
            </div>
            </td-card>
            </td-cards>
            </ion-pane>
            </ion-view>

As you can see here the part we're interested in:

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>

I tried everything (in the browser i don't see this border!), but nothing to change it! Anyone could help me trying to find the way to delete that border? N.B. : also tried to edit ionic.css and changed only in the browser.

EDIT: And it should be hidden only in this view, so where the class is bar-transparent

Upvotes: 27

Views: 45387

Answers (8)

Hizir
Hizir

Reputation: 214

For Ionic 5, this worked for me:

<ion-header class="ion-no-border"></ion-header>

Upvotes: 7

Ishita Ray
Ishita Ray

Reputation: 666

I solved it like that way...

Give ion-toolbar child of ion-header a class like "headerMain" and apply css below.

css:

.headerMain {
    border-bottom-width: 0;
}

Upvotes: 0

H S W
H S W

Reputation: 7119

In ionic 2/3 border will be removed by using ionic-header no-border.

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

In ionic 5 border will be removed by using class="ion-no-border".

<ion-header class="ion-no-border"></ion-header>

Upvotes: 69

Tahmina Khatoon
Tahmina Khatoon

Reputation: 1091

For ionic 5, it should be

<ion-header class="ion-no-border"></ion-header>

Upvotes: 17

Miguel Carrillo
Miguel Carrillo

Reputation: 347

Option 1: Using overflow CSS property

ion-header {
    overflow: hidden;
}

Option 2: Using the no-border proterty of 

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

Upvotes: 5

Morris Mukiri
Morris Mukiri

Reputation: 153

This removed the border between the header and tabs for me on ionic 1.1.0

.bar-header {
    box-shadow: none;
    height: 45px;
}

Upvotes: 0

BenNov
BenNov

Reputation: 1111

No problem,

Just add this to your custom CSS:

.bar-header {
    border: 0px !important;
    border-bottom-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
}

Upvotes: 34

Tommaso Resti
Tommaso Resti

Reputation: 5950

@BenNov answer doesn't work for me.

this is what i did to remove ion-nav-bar bottom border

.bar {
    background-size: 100% 0px;
}

I'm working with ionic-1.0.0-rc.4

Upvotes: 8

Related Questions