Test navbar fix by @giacomochecchin - Codewith.it

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

References

preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<label>Mostrare un testo di etichetta per un elemento di input.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
classDefinisce una o più classi per elemento

Users

Log in to search for users

Explore

Find inspiration

Thomas Fattori 1

Template Wheel Stripes

Test navbar fix

5/10/24 es. 5 - consonanti

Costruzione di tabella con html5

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}