Auf Thema antworten

Beitrag

[QUOTE="Sparfuchs76, post: 14720, member: 5187"]
Hi,

ich bin gerade angefangen mit html und css. hab schon einige Tutorials hinter mir und versuche gerade privat eine Page zu erstellen. Ich habe aber das Problem das bei einem Bildschirm kleiner als 600px die Nav Leiste verschwinden soll code im header.css rauskommentiert und beim click auf das logo das Menü sichtbar ist. bei mir ist es entweder immer sichtbar Kommentierung weg oder immer unsichtbar - keine Funktion der Checkbox? Ich vermute mal ein kleiner Kinken der mich etwas frustriert ;). Vielleicht kann mir hier jemand weiter helfen? Ich komme leider im header.css nicht weiter.

Vielen Dank schon mal VG Jens

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Haustechniker / House Technician</title>
  <link rel="stylesheet" href="general.css"/>
  <link rel="stylesheet" href="header.css">
</head>
<body>
  <main>
    <header>
      <nav>
        <div class="logo-container">
          <input type="checkbox" id="toggle-button">
          <label for="toggle-button">
            <span><img class="logo-symbol" src="/img/logo2.png" alt=""></span>
            <div class="logo-text">Haustechniker / House Technician</div>
          </label>
        </div>
        
        <div class="nav-container" id="nav-container">
          <ul>
            <li><a href="#">Aufgaben</a></li>
            <li><a href="#">Besprechungsraum</a></li>
            <li><a href="#">Festzeltgarnitur</a></li>
            <li><a href="#">Team</a></li>
          </ul>
        </div>
      </nav>
    </header>
    
    <section>
      <article class="aufgaben-container"><h2>Aufgaben</h2></article>
    </section>
    <section>
      <article><h2>Besprechungsraum</h2></article>
    </section>
    
    <section>
      <article class="article-header"><h2>Festzeltgarnitur</h2></article>
    </section>
    <section>
      <article><h2>Team</h2></article>
    </section>
    
    <footer>Footer</footer>
  </main>
</body>
</html>

general css

:root {
  --main-brand-color: #297AE3;
  --accent-color: #d52c3a;
  --primary-color: #15171C;
  --secondary-color: #232933;
  --light-secondary-color: #2E3744;
  --text-color: white;
  --secondary-text-color: #B3B4B6;
  --headerHeight: 7rem;
  --logoHeight: 5rem;
}
* {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background-color: var(--primary-color);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--text-color);
}
main {
  width: 100%;
  background-color: var(--secondary-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--headerHeight) 0 0 0;
}

header css

header {
    padding: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}
nav {
    width: 100%;
    height: var(--headerHeight);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    z-index: 3;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}
.nav-container ul {
    list-style: none;
    display: flex;
    gap: 10px;
    margin-right: 20px;
}
.nav-container a {
    color: var(--secondary-text-color);
    text-decoration: none;
    position: relative;
    padding: 3px;
}
.nav-container a:hover {
    color: var(--text-color);
}
.nav-container a::after {
    content: '';
    height: 2px;
    width: 0%;
    background: var(--main-brand-color);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 150ms ease-in-out;
}
.nav-container a:hover::after {
    width: 100%;
}
.logo-container {
    position: relative;
    margin-bottom: 20px;
}
.logo-text {
    position: absolute;
    top: 80%;
    left: 50%;
    z-index: 1;
    color: var(--secondary-text-color);
    font-size: 10px;
}
.logo-symbol {
    height: var(--logoHeight);
    margin-left: 20px;
}
#toggle-button {
    display: none;
}
@media(max-width: 600px) {
    nav {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        padding-top: 4px;
    }
    
    nav ul {
        flex-direction: column;
        background: var(--accent-color);
        padding: 10px;
        border-radius: 20px 20px 20px 20px;
        justify-content: center;
    }
    /*
    .nav-container {
        display:none;
    }
    */
    #toggle-button:checked ~ .nav-container {
        color: var(--text-color);
    }
    label[for="toggle-button"] {
        display: block;
    }
    .logo-symbol:hover {
        cursor: pointer;
    }
    .aufgaben-container {
        margin-top: 100px;
    }
}
[/QUOTE]

Authentifizierung