# White Space Showing where Nav Bar Should be on Transition

**URL:** <https://forum.ionicframework.com/t/white-space-showing-where-nav-bar-should-be-on-transition/45106>\
**Category:** ionic-v1\
**Created:** [March 1, 2016, 1:42am UTC](https://forum.ionicframework.com/t/white-space-showing-where-nav-bar-should-be-on-transition/45106 "2016-03-01T01:42:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![whileyryan](https://avatars.discourse-cdn.com/v4/letter/w/a3d4f5/32.png) [@whileyryan](https://forum.ionicframework.com/u/whileyryan)\
**Post date:** [March 1, 2016, 1:42am UTC](https://forum.ionicframework.com/t/white-space-showing-where-nav-bar-should-be-on-transition/45106/1 "2016-03-01T01:42:40Z")

</div>

Hello,

I am running into issues with nav bars and navigating between different pages. So I have the details below.

**What I want to Do**  
I wanna be able to show different Nav Bars on different pages. Some pages have a nav bar that is one color, and others have a different color. So I’ve removed the class from the nav bar in the side menu because that persisted between pages.

I also want to be able to show a back button on some pages and then hamburger button on other pages.

**The Problem**  
When I’m transitioning between pages, some headers will load before the rest of the page and so that page will be two different colors for a moment. And then sometimes the nav bar will just turn completely white while its transitioning.

I also have ion-nav-bars in most pages, inside of the view, because otherwise there is just a white space at the top of the page.

So most pages look like this:

```
<ion-view view-title="" class="blue-back">
  <ion-nav-bar class="blue-back">
    <ion-nav-buttons side="left">
      <button menu-toggle="left" class="button white button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
  </ion-nav-bar>
  <ion-content class="blue-back">
  </ion-content>
</ion-view>

```

With the side-menu-content looking like this:

```
<ion-side-menu-content>
        <ion-nav-bar>
          <ion-nav-back-button>
          </ion-nav-back-button>
          <ion-nav-buttons side="left">
            <button class="button-icon white ion-navicon" menu-toggle="left">
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu-content>

```

And then menu with back views are enabled.

So if anyone could provide any insight into how I would be able to accomplish what I listed above, I’d really appreciate it.

Thanks!