# Ion-nav-bar drops below ion-tabs

**URL:** <https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452>\
**Category:** ionic-v1\
**Created:** [December 19, 2014, 9:43am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452 "2014-12-19T09:43:08Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![ronycohen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ronycohen/32/7982_2.png) [@ronycohen](https://forum.ionicframework.com/u/ronycohen)\
**Post date:** [December 28, 2014, 1:45pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/21 "2014-12-28T13:45:48Z")

</div>

Not working, look

```
 <ion-view hide-back-button="false" title="title">
    
    	<ion-nav-bar align-title="left" class="bar-positive">
    	    <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
    	</ion-nav-bar>
    
    <ion-nav-buttons side="right">
    	<a class="button button-icon icon ion-home" href="#/Home"></a>
    </ion-nav-buttons>
<ion-header-bar class="bar-light bar-subheader">
  <input type="search"
    placeholder="Search..."
    ng-model="search"
    ng-focus="searchFocused = true"
    ng-blur="searchFocused = false"
    ng-change="doSearch()">
  <button ng-if="search.length"
    class="button button-icon ion-android-close input-button button-collection"
    ng-click="clearSearch()">
  </button>
</ion-header-bar>

<ion-tabs class="tabs-positive tabs-icon-only tabs-icon-top">
<ion-tab title="EventBoard" icon-on="icon ion-ios7-paper" icon-off="icon ion-ios7-paper-outline" on-select="onTabEventsSelected()">

<ion-content class="has-header has-subheader" delegate-handle="EventsScroll">
//STUFF HERE

</ion-content>
</ion-tab>

</ion-tabs>
</ion-view>
```

---

<div class="post-metadata">

**Author:** ![siddhartha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@siddhartha](https://forum.ionicframework.com/u/siddhartha)\
**Post date:** [December 29, 2014, 2:24pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/22 "2014-12-29T14:24:02Z")

</div>

The same thing works for me. ☹

---

<div class="post-metadata">

**Author:** ![jimit](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jimit/32/67313_2.png) [@jimit](https://forum.ionicframework.com/u/jimit)\
**Post date:** [January 22, 2015, 1:36pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/23 "2015-01-22T13:36:33Z")

</div>

@ronycohen have you found the solution ? I am having the same problem. I have tested above mentioned solution but its not working. @siddhartha can you share your working project template with just tabs and navigation bar ?

---

<div class="post-metadata">

**Author:** ![dshchurov](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@dshchurov](https://forum.ionicframework.com/u/dshchurov)\
**Post date:** [January 22, 2015, 1:49pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/24 "2015-01-22T13:49:20Z")

</div>

The same happens to me when app is set up to have a header and tabs at bottom. The lower about 50px of a content remains below tabs, and there is o way to scroll it up to a viewport.  
The problem is related to `class="pane"` add-on which `<ion-nav-view` makes to an internal `<ion-content`  
You’ve let us know that `<ion-nav-view` is supposed to be container for a named child state. So, in our case, there is one `<ion-nav-view` for `@main` view placeholder, and another `<ion-nav-view` for partial views.  
Thus, when `@main` nav view adds `class="pane"` to `<ion-tabs` and another partial nav view adds the same class to a content, the issue happens: pane class affects on top, and bottom css properties. This is unexpected and unwilling

---

<div class="post-metadata">

**Author:** ![ronycohen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ronycohen/32/7982_2.png) [@ronycohen](https://forum.ionicframework.com/u/ronycohen)\
**Post date:** [January 22, 2015, 1:51pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/25 "2015-01-22T13:51:41Z")

</div>

I played with CSS to define a padding-top.

---

<div class="post-metadata">

**Author:** ![dco5](https://avatars.discourse-cdn.com/v4/letter/d/a4c791/32.png) [@dco5](https://forum.ionicframework.com/u/dco5)\
**Post date:** [January 25, 2015, 5:11pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/26 "2015-01-25T17:11:53Z")

</div>

Ok, so basically the only work around right now is to force it with css padding?

---

<div class="post-metadata">

**Author:** ![slownslower](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@slownslower](https://forum.ionicframework.com/u/slownslower)\
**Post date:** [February 9, 2015, 7:03pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/27 "2015-02-09T19:03:49Z")

</div>

I found out that if you pad `<ion-content>` with the following, it will work:

```
<div class="item item-divider"></div>

```

This workaround allows you to see uniform spacing in the emulator and in the browser (served by “ionic serve”).

Also, “has-header” has been deprecated prior to beta13.  
_[https://github.com/driftyco/ionic/issues/2121](https://github.com/driftyco/ionic/issues/2121)_

---

<div class="post-metadata">

**Author:** ![dshchurov](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@dshchurov](https://forum.ionicframework.com/u/dshchurov)\
**Post date:** [February 23, 2015, 2:27pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/28 "2015-02-23T14:27:30Z")

</div>

In my case the problem was with missed `<ion-view>` wrapping `<ion-content>` in the inner placeholder AND a bug in `.bar-header.item-input-inset` which sets `position: relative;` which makes inner element with `class="pane"` start not from 0px, but from 44px. Physically. Logically it was described as `top: 0`, but because of previous element with `position: relative`, the actual starting point was taken as 44px  
Please, consider making changes to `.bar-header.item-input-inset` because it seems not suitable to manage `position` there (we can talk about borders and background only there)

[Previous page](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452.md?page=1)