Hiding application header polymer 2.0

Question

I am trying to hide the application header aka app-header. While the application header gets hidden, it does leave out lot of white space. I have defined

<app-header hidden$="{{hideme}}"slot="header">

When the app header is hidden, rest of the elements in the div does not move up. Please refer to the attached image. The white space is due to app header being hidden.

Answer 1

Wrap <app-header slot="header"> with: <template is="dom-if" if="{{!hideme}}"><template>

DEMO