Aiuto su HTML e CSS?

Vi allego 2 foto.

https://imgur.com/a/vGKASEz

https://imgur.com/a/8k8BQoM

Praticamente quando espando la navbar da mobile si crea quel gap tra l'immagine e la navbar.

Ecco il codice

https://jsfiddle.net/zshf18bp/

perfavore aiutatemi

1 risposta

Classificazione
  • 1 mese fa
    Risposta preferita

    Quel gap che si viene a creare è colpa dei 43 pixel di padding che associ al banner, che non vanno via quando attivi il menu. Se vuoi fare in modo che il menù resti bloccato in alto ed il banner resti sotto, ma senza seguire il menù a tendina allora dovrai fare uso di un po' di Javascript: https://jsfiddle.net/Baffol2asta/fy6L9oza/

    Invece se vuoi che il banner venga dietro al menù a tendina e sia anch'esso fixed puoi fare tutto senza javascript in questo modo: racchiudi il div di classe topnav e l'immagine del banner all'interno di un ulteriore div di classe "container" (nome scelto a caso, puoi cambiarlo come ti pare), e a questo punto rimuovi padding-top:43px; dalla regola di .ytbanner, rimuovi la regola position:fixed; da .topnav e poi aggiungi questa: 

    .container {

                display: flex;

                flex-direction: column;

                position: fixed;

    }

Altre domande? Fai una domanda e ottieni le risposte che cerchi.