White Space Showing where Nav Bar Should be on Transition

ionic-v1
1

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!