Angular2 material lite fixed header not working

Question

I am trying to use a material lite fixed header in my angular cli project, header is rendered with all the links but is not fixed.

My app.html:

<app-home></app-home>

My home.html:

<app-header></app-header>
<app-services></app-services>
<app-about-us></app-about-us>
<app-contact></app-contact>

My header.html:

<div class="demo-layout-transparent mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header mdl-layout__header--transparent">
        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">Vision backlog</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a scrollTo class="mdl-navigation__link" href="#services">Services</a>
                <a scrollTo class="mdl-navigation__link" href="#about">About us</a>
                <a scrollTo class="mdl-navigation__link" href="#contact">Contact</a>
            </nav>
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
        </nav>
    </div>
    <main class="mdl-layout__content">

    </main>
</div>

And it's css:

.demo-layout-transparent {
    height: 100vh;
    display: block;
    background: url('../assets/images/transparent.JPG');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
  your background is light. */
  color: white;
}

Am I missing something or something wrong?

score 0 · Answer 1 · answered Jun 24 '17 at 06:56

As per the mdl documentation , you can use the below code to implement fixed headers.

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
    <!-- Your content goes here -->

    </div>
  </main>
</div>

Mdl docs:-https://getmdl.io/components/index.html#layout-section

Hope this helps..

score 0 · Answer 2 · answered Jun 25 '17 at 16:38

I think the problem is that the fixed-header class does not do what you would expect it to, or at least what i expected it to, which is add position:fixed to the header element or something like that. But instead, it just tells the header to be always visible, in large and small screens. Without that class it would only be visible on large screens.

I had to add this classes in order to fix it like a bootstrap navbar:

header.mdl-layout__header, .mdl-layout__drawer, .mdl-layout__obfuscator.is-
visible {
  position: fixed;
}

I used the fixed header with drawer so what i need to fix is the header itself and the drawer.

I also added a padding-top to the main element after the header which contains your application content, same as bootstrap navbar.

Angular2 material lite fixed header not working

2 Answers2