Change Slide in Menu Background Colors in IONIC 3


#1

Ok, so I’ve been wracking my brain for 3 hours on this…I have found solutions for older versions of Ionic which don’t seem to apply to Ionic 3. No matter what I do the background-colors will not change on the TITLE bar or on the MENU ITEMS. This is what the side menu looks like in IONIC 3


<div class='bgcolor'>
<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</div>

I’ve added, classes to app.scss and then applied them to the above code to no avail. I’ve also added classes to variables.scss and applied them to the above code and absolutely nothing. I’ve inspected the elements and changed the classes that are used and those changed colors on the entire app as opposed to just the side menu…this can’t be this difficult, there is something I am missing…

Any help would be greatly appreciated.


#2

was able to get around this problem by adding a class to the variables.scss in the theme directory and applying those to the button tag like this:
<button menuClose ion-item *ngFor=“let p of pages” (click)=“openPage§” color=“navbarColor”>
{{p.title}}

I have not been able to get the white space under the buttons to reflect my color. Any ideas?