Ciao, il menù che intendi in gergo si chiama "menù hamburger" (proprio per la forma che solitamente ha), è un impostazione css.Ciao a tutti, sono alle prime armi nel mondo del coding sto provando bootstrap e le sue funzionalità, dai doc di bootstrap mi sono ritrovato a leggere un codice sulla sezione navbar, l'ho copiato su vscode per poi visualizzarlo sul broswer però non mi è chiaro un passaggio in tutto il codice, ho notato se diminuisco la grandezza della finestra del broswer da dove viene visualizzato l'html gli elementi del navbar vengono racchiusi in un button invece di restare estesi in tutto il navbar... vorrei spiegato quale classe di bootstrap determina questo e come è scritta in css per dare questa impostazione... vi allego il codice così potete dargli un'occhiata...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
con questo tag definisci che la pagina deve essere visualizzata 1:1 sul display che stai utilizzando, viene ridimensionata automaticamente adattandosi alla grandezza dello schermo.Nel file CSS trovi le varie regole: (scrivo un esempio)
CSS:
.navbar {
color:red;
}
@media screen and (max-width:2100px){
.navbar {
color:white;
}
}
@media screen and (max-width:1750px){
.navbar {
color:black;
}
}
@media screen and (max-width:991px){
.navbar {
color:green;
}
}
Nella prima regola si definisce che la navbar deve essere di colore rosso, la seconda regola definisce che per i dispositivi con uno schermo maggiore o uguale a 2100px la navbar sarà bianca e non rossa (quindi va a sostituire la regola principale), la terza regola definisce che per i dispositivi con uno schermo maggiore o uguale a 1750px la navabar dovrà essere visualizzata di colore nero (di conseguenza questa terza regola sostituisce la prima e la seconda) e cosi via a scala.. puoi creare un numero infinito di variabili, ovviamente per ciò che hai bisogno.
Nell'esempio ho messo una regola semplice come il "color" ma puoi definire qualsiasi regola da sostituire.
Nel tuo script questo definisce la classe del button:
HTML:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
E questa è la classe che definisce la navbar ristretta con il menù hamburger:
HTML:
<div class="collapse navbar-collapse" id="navbarSupportedContent">