Ion-nav-bar drops below ion-tabs

ionic-v1
1

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?

2

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.

3

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

4

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.

5

codepen of your problem please!

6

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

7

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

8

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

9

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

10

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

11

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…

12

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

13

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

14

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

15

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.

16

Haha lol! So figured it out?

17

YES Thank you :smile:

18

Solution

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

1 Like
19

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

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

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