1

I have this below code for ion navbar, where I am having one menu icon on the right side. And I want to change the color of that menu header.But when i am changing color of ion-navbar , it is changing for menu header also.I want separate color for both ion-navbar and ion-menu.

<ion-menu [content]="content" side="right" id="menu2">
    <ion-header>
        <ion-toolbar class="menu_header">
            <ion-title>MyApp</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
             <button ion-item  menuClose="menu2" detail-none>
              Item1
            </button>
            <button ion-item  menuClose="menu2" detail-none>
                Item2
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-header>
    <ion-navbar primary>
        <ion-title class="header-title" text-center>
            Home
        </ion-title>
        <button ion-button icon-only menuToggle="right" end >
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-navbar>
</ion-header>

And for changing the color of ion-navbar I am adding the below line in variable.scss

$toolbar-background: #EF473A;

Can anyone please help me how to keep the separate color for both?

Saugat Bhattarai
  • 2,614
  • 4
  • 24
  • 33
ananya
  • 1,001
  • 6
  • 33
  • 50
  • can u provide a demo – Sa E Chowdary Nov 27 '18 at 12:03
  • If you will create a project using "ionic start myApp sidemenu ".After the project create, I want to keep separate color for "Home" page header. And separate color for "side menu" header. github.com/ionic-team/ionic2-starter-sidemenu This project only i am having. @Sa E Chowdary – ananya Nov 28 '18 at 04:38

1 Answers1

0

If you want to change the color only for the titles, you could use the classes

.header-title {
  color: blue;
}
.menu_header {
  color: #EF473A;
}

If you'd like to change the color for the whole header You can either do it on the element:

body > ion-header {
  color: blue;
}
ion-menu > ion-header {
  color: #EF473A;
}

or alternatively add a class to the elements you want to modify, but that potentially mean editing a third party component...

Th3S4mur41
  • 1,930
  • 1
  • 13
  • 28
  • @ananya do you have an example of your CSS and maybe a screenshot of what you are trying to achieve? I guess I don't understand your question correctly... – Th3S4mur41 Nov 27 '18 at 12:41
  • If you will create a project using "ionic start myApp sidemenu ".After the project create, I want to keep separate color for "Home" page header. And separate color for "side menu" header. @Michaël Vanderheyden – ananya Nov 28 '18 at 04:33
  • https://github.com/ionic-team/ionic2-starter-sidemenu This project only i am having. @Michaël Vanderheyden – ananya Nov 28 '18 at 04:37
  • @ananya, I updated the solution above based on the repo you shared – Th3S4mur41 Nov 28 '18 at 09:50
  • I got the solution. $colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, customColor:( base: #0f456f, contrast: #ffffff ) ); And i am adding customColor in ion-navbar – ananya Nov 28 '18 at 11:29