angular2-mdl change header color and height

Question

I am using angular2-mdl (http://mseemann.io/angular2-mdl/) for styling in my angular cli project. I have added default css in my index.html as

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

My main content that defines header and navigation:

<div class="demo-container" mdl-shadow="2">
 <mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
  <mdl-layout-header>
   <mdl-layout-header-row>
    <mdl-layout-title>AMM</mdl-layout-title>
    <mdl-layout-spacer></mdl-layout-spacer>
    <!-- Navigation. We hide it in small screens. -->
    <nav class="mdl-navigation">

   <!-- logout -->
   <button mdl-button mdl-button mdl-button-type="icon"  (click)="logout()">
    <mdl-icon>exit_to_app</mdl-icon>
  </button>
</nav>
</mdl-layout-header-row>
</mdl-layout-header>
<mdl-layout-content>
 <!-- Your content goes here -->

 <div class="mdl-grid">

</div>
</mdl-layout-content>
</mdl-layout>
</div>

I want to customize style for my header: I want to use custom color and I want to define my own height for it.

How can I achieve this? What and where I have to modify?

NOTE: I do not want to change the entire theme, I just need to modify my header.

You must have tried this, but why cannot you override the height and color styles of the header classes? — Santosh, Sep 27 '17 at 14:32
I tried but not sure where and how and exactly what (which class) can I override — Thinker, Sep 27 '17 at 14:42

Santosh · Answer 1 · 2017-09-27T14:54:06.723

One way is to override the mdl-layout-header for height and color. So add a custom class to it, and override its css

mdl-layout-header.custom{
  min-height: 30px; //change this value for height
  height: 30px;
  background-color: red; // change this for color
}
mdl-layout-header.custom mdl-layout-header-row{
  height: inherit;
}

Navbar code (html)

<mdl-layout-header class="custom">
   <mdl-layout-header-row>
      ...
      ...
      ...
   </mdl-layout-header-row>
</mdl-layout-header>

score 0 · Answer 2 · answered Sep 27 '17 at 15:04

0

I did override original css classes in style.css file, which worked fine

answered Sep 27 '17 at 15:04

Thinker

5,326
13
61
137

angular2-mdl change header color and height

2 Answers2