title: Ionic 4 transparent transparent header
body: <p>I have an Ionic 4 app and I want a transparent header. The Ionic documentation states that 'fullscreen' must be added to the ion-content, and that 'translucent' must be added to the ion-toolbar. </p>
  
  <p>This does not work and always leaves the toolbar at the top. I have added this to the css as well:</p>
  
  <pre><code>ion-toolbar {
     --background: transparent;
     --ion-color-base: transparent !important;
  }
  
  &lt;ion-header&gt;
    &lt;ion-toolbar translucent &gt;
      &lt;ion-buttons slot="start"  (click)="goBack()"&gt;
          &lt;ion-icon name="arrow-back"&gt;&lt;/ion-icon&gt;
      &lt;/ion-buttons&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content fullscreen &gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The only way I can find that achieves the affect of a transparent header is when I go to the Shadow DOM in chrome and add a background attribute to the class 'inner-scroll'</p>
  
  <p>However there are no variables associated with background color in this class and so I cannot change the background using this method.</p>
  
  <p>How can I make this transparent header/toolbar work!? </p>
  
  <p><strong><em>Solution:</em></strong></p>
  
  <p>for anyone else having this issue - the documentation is not clear at all. To get a fully transparent functional header:</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar translucent&gt;
      &lt;ion-back-button&gt;&lt;/ion-back-button&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content fullscreen&gt; &lt;/ion-content&gt;
  </code></pre>
  
  <p>No in the css add the following:</p>
  
  <pre><code>ion-toolbar {
  --ion-toolbar-background-color: transparent;
  --ion-toolbar-text-color: white;
  }
  </code></pre>
  
  <p>The documentation only specifies the HTML side of things but with the new Shadow DOM in Ionic, variables must be used to changed most of the Ionic component styles.</p>