Ion-header-bar Class Not Adding Color

Ionic Framework ionic-v3
1

I’m trying to add a separate scrollable ion-content element to the bottom of my page. At the top of this 2nd ion-content area, I want a header bar with a label for the section. When I preview the page, I’m not seeing the color of the bar appearing as I’m expecting. Could it be that I’m nesting the elements incorrectly?

This is my code:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Flex</ion-title>
</ion-navbar>


<ion-content padding class="getting-started has-subheader">

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>

</ion-content>

<ion-header-bar class="bar-positive"> <h1 class="title"> Testing Header </h1> </ion-header-bar>
<ion-content class="has-header">

<ion-list>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>
<ion-item> Test 1 </ion-item>

</ion-list>

</ion-content>
2

there is only one ionContent!

deactivate scrolling on your ion-content and add two ionScrolls