Header 1 Bis

Qui viene riproposto lo stesso effetto della pagina Header 1 nella quale il menu, assieme a tutto l'header, ha un background trasparente che in questo caso non si sovrappone ad una immagine statica, ma ad una slide di immagini (sempre nella medesima posizione "Title" del template).

Anche qui, allo scroll della pagina l'header, fisso in alto, riprende un colore di sfondo.

La slide di immagini è realizzata con il componente "Carousel" di Bootstrap 4; il codice utilizzato e riprodotto qui sotto è esattamente quello presente nella documentazione del framework, con l'unica piccola variante della colorazione in rosso del testo delle "caption".

Questo il codice del carousel:


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="images/headertest/header1.jpg" alt="First slide" />
<div class="carousel-caption d-none d-md-block" style="color: red;">
    <h5>PRIMA SLIDE</h5>
    <p>un po' di testo</p>
  </div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="images/headertest/header2.jpg" alt="Second slide" />
<div class="carousel-caption d-none d-md-block" style="color: red;">
    <h5>SECONDA SLIDE</h5>
    <p>un po' di testo</p>
  </div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="images/headertest/header3.jpg" alt="Third slide" />
<div class="carousel-caption d-none d-md-block" style="color: red;">
    <h5>TERZA SLIDE</h5>
    <p>un po' di testo</p>
  </div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Stampa   Email