Test navbar fix by @giacomochecchin - Codewith.it

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

References

<tfoot>Definisce il footer o sezione inferiore di una tabella.
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
_selfApre collegamenti ipertestuali nella stessa pagina del browser
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
typeSpecifica la tipologia/funzione di un elemento.
<div>Crea contenitori generici o sezioni in una pagina

Users

Log in to search for users

Explore

Find inspiration

Countdown Passaporto 1

New Charter Page Test

Countdown fine anno

La porcellina Milly

Scheda Tecnica iPhone 15 Pro

classifica finita

Tabella Marcatori Serie A 20

Esercitazione n. 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}