Ion-nav-bar drops below ion-tabs

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

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

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.

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

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.

codepen of your problem please!

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

Works fine here http://codepen.io/anon/pen/JoKByZ

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

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

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

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…

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

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

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

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.

Haha lol! So figured it out?

YES Thank you :smile:

Solution

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

1 Like

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

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

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