# 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:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 19, 2014, 9:43am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/1 "2014-12-19T09:43:08Z")

</div>

I upgraded to beta 14 and my ion-nav-bar keeps dropping below my ion-tabs.

Here is my tabs.html :

```
        <ion-side-menus delegate-handle="sideMenu">

        <!-- Center content -->
        <ion-side-menu-content>

            <ion-nav-bar class="bar-dark nav-title-slide-ios7">
                <ion-nav-back-button class="button-clear">
                    <i class="ion-arrow-left-c"></i> Back
                </ion-nav-back-button>
                <h1 class="title"></h1>
            </ion-nav-bar>

            <ion-tabs class="tabs-top tabs-icon-left tabs-striped">

                <ion-tab title="More" icon="icon ion-navicon" id="tab-more" ng-click="openSideMenu('sideMenu')" >
                    <ion-nav-view name="tab-more" class="slide-left-right"></ion-nav-view>
                </ion-tab>

                <ion-tab title="Events" icon="icon ion-calendar" id="" ui-sref="tab.events">
                    <ion-nav-view name="tab-events" class="slide-left-right"></ion-nav-view>
                </ion-tab>

                <ion-tab title="Involved" icon="icon ion-checkmark-round" id="tab-involved" ui-sref="tab.involved">
                    <ion-nav-view name="tab-involved" class="slide-left-right"></ion-nav-view>
                </ion-tab>

                <ion-tab title="Networks" icon="icon ion-network" id="tab-networks" ui-sref="tab.networks">
                    <ion-nav-view name="tab-networks" class="slide-left-right"></ion-nav-view>
                </ion-tab>

            </ion-tabs>

        </ion-side-menu-content>

        <ion-side-menu side="left">
            <ion-header-bar class="bar-balanced">
                <h1 class="title">More</h1>
            </ion-header-bar>
            <ion-content>
                <ion-list>
                    <ion-item nav-clear menu-close ui-sref="tab.events">HOME</ion-item>
                    <ion-item nav-clear menu-close ui-sref="tab.involved">INVOLVED</ion-item>
                    <ion-item nav-clear menu-close ui-sref="tab.profile">PROFILE</ion-item>
                    <ion-item nav-clear menu-close href="#">SIGN OUT</ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>

```

This is a screenshot of what happens:

![image](https://global.discourse-cdn.com/ionicframework/original/2X/7/706d32db5d8c6f423722b3e378c4f5a6ad8bc292.png)

As i said, it worked ok on beta 13. Any ideas?

---

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 19, 2014, 3:09pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/2 "2014-12-19T15:09:57Z")

</div>

I can confirm that when i remove tabs-top, the nav-bar positions correctly at the top of the screen but obviously, the tabs end up at the bottom of the screen.

---

<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 19, 2014, 5:10pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/3 "2014-12-19T17:10:56Z")

</div>

> [@bingojo](#):
>
> -top, the nav-bar positions correctly at the top of the screen but obv

So if you want your tabs to be at the bottom regardless of what platform you are on you can use `$ionicConfigProvider.tabs.position('top')`

You should have this in your app.config block

---

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 19, 2014, 5:28pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/4 "2014-12-19T17:28:07Z")

</div>

I tried removing tabs-top class from ion-tabs and added $ionicConfigProvider.tabs.position(‘top’) and its the same, nav bar is still below the tabs.

---

<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 19, 2014, 5:28pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/5 "2014-12-19T17:28:55Z")

</div>

codepen of your problem please!

---

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 19, 2014, 5:33pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/6 "2014-12-19T17:33:03Z")

</div>

Not sure codepen will help as it works ok in in a desktop browser, it breaks when i view it running “ionic emulate ios”.

---

<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 19, 2014, 5:37pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/7 "2014-12-19T17:37:06Z")

</div>

Works fine here [http://codepen.io/anon/pen/JoKByZ](http://codepen.io/anon/pen/JoKByZ)

---

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 19, 2014, 5:44pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/8 "2014-12-19T17:44:48Z")

</div>

Through a desktop browser is fine hence it working in codepen, i tried android and ios emulator and it breaks.

---

<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 19, 2014, 5:51pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/9 "2014-12-19T17:51:12Z")

</div>

Can you post the www contents of your app ? May be provide a github link or mail me the folder?

---

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 19, 2014, 6:14pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/10 "2014-12-19T18:14:46Z")

</div>

Sure, when i get back i will PM you a dropbox link,

---

<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 21, 2014, 10:53pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/11 "2014-12-21T22:53:34Z")

</div>

> [@siddhartha](#):
>
> May be provide a github link or mail me the folder?

Same problem for me.  
I encounter exactly the same issue.

```
<ion-view hide-back-button="true" title="TheTitle">

	<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-tabs class="tabs-positive tabs-icon-only tabs-icon-top ">

```

etc…

---

<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 21, 2014, 10:58pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/12 "2014-12-21T22:58:15Z")

</div>

On your codepen @siddhartha when you click the HEY green Button, you can see the “I love Python” Behind the navbar.

---

<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 22, 2014, 8:06am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/13 "2014-12-22T08:06:17Z")

</div>

Just add a padding-top of 25px to ion-content. Why is everyone complaining about this so much.

---

<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 22, 2014, 10:06am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/14 "2014-12-22T10:06:02Z")

</div>

You’re right. It’s not complaining, it’s contributing. ^^

---

<div class="post-metadata">

**Author:** ![bingojo](https://avatars.discourse-cdn.com/v4/letter/b/ac8455/32.png) [@bingojo](https://forum.ionicframework.com/u/bingojo)\
**Post date:** [December 22, 2014, 10:17am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/15 "2014-12-22T10:17:19Z")

</div>

Having a nested nav bar is the problem, moving it outside makes it work.

This is my index.html now…

```
<ion-nav-bar>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

```

I am having other issues generally with beta 14 so thinking to go back to 13. e.g. slidebox has stopped working.

---

<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 22, 2014, 10:38am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/16 "2014-12-22T10:38:37Z")

</div>

Haha lol! So figured it out?

---

<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 23, 2014, 12:14am UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/17 "2014-12-23T00:14:17Z")

</div>

YES Thank you 😄

---

<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 24, 2014, 4:14pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/18 "2014-12-24T16:14:32Z")

</div>

Solution

@ronycohen You should add the class `has-subheader` to your `ion-content` directive.

---

<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 27, 2014, 1:39pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/19 "2014-12-27T13:39:24Z")

</div>

mmmhh obviously it’s not working properly within tabs. I’ll keep my css style ;

```
.has-forced-header{
  margin-top: 50px
}
```

---

<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 27, 2014, 5:28pm UTC](https://forum.ionicframework.com/t/ion-nav-bar-drops-below-ion-tabs/14452/20 "2014-12-27T17:28:53Z")

</div>

you should have both has-header and has-subheader set.

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