Test navbar fix by @giacomochecchin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

formmethodDefinisce il metodo di invio dei dati oltre a method
<title>Definisce il titolo della pagina web.
<caption>Definisce didascalie all'interno di una tabella
multipart/form-dataCodifica dei caratteri di un form
<a>Inserisce link e collegamenti ipertestuali
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video

Users

Log in to search for users

Explore

Find inspiration

Il Labirinto di Teseo

formattazione_testo.html.(2)

Scheda Tecnica Honor Magic 6 Pro

Bootstrap List Grid

esercizi riepilogativi

Riprova verifica di progr(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="hstack gap-4">
      <div class="bg-body-tertiary"> <a class="nav-link" href="#"><i class="bi bi-bell-fill"></i></a></div>
      <div class="bg-body-tertiary"><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></div>
      <div id="switch">
        <div class="form-check form-switch">
          
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label visually-hidden" for="flexSwitchCheckDefault">Switch tema chiaro/scuro</label>
</div>
      </div>
</div>
   
      <!--<a class="navbar-brand" href="#">Notifiche</a>-->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <a href="">Test</a>
    </div>
  </div>
</nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

@media screen and (min-width:992px){
  .navbar .container-fluid, .navbar-expand-lg .navbar-collapse, .navbar-expand-lg .navbar-nav {
    flex-direction:column;
    
  }
  .navbar {
    width:25%;
    height:100vh;
  }
}
#switch::before {
    content: "M";
}
#switch::after {
    content: "S";
}
#switch {float:left;display:flex}
.form-check-input:focus {box-shadow:none}