Bootstrap 5 - překrývající navigace – CSS – Fórum

Bootstrap 5 - překrývající navigace

otula 0

Duch

31. 12. 2024 #1

Ahoj, chtěl bych poprosit o radu, jak v Bootstrapu docílit toho, aby se navigace bez třídy fixed-top chovala tak, že když je sbalená do tlačítka a kliknutím se rozbalí, překrývala obsah pod sebou a neodsouvala ho.

Pokud má třídu fixed-top, tak se takto chová, jenže mi nevyhovuje, že v tu chvíli navigační bar překrývá následující obsah.

Níže je jednoduchý demonstrační kód. V této podobě překrývá následující text, což nechci. Při zmenšení šířky prohlížeče a smrsknutí do tlačítka se ale rozbalovací navigace chová tak, jak potřebuji. Pokud odeberu prvku "nav" třídu fixed-top bude text začínat správně pod navigací, ale rozbalovací navigace bude text odsouvat, což právě nechci.

Dalo by se to asi řešit ponecháním fixed-top a nastavením margin top u následujícího obsahu, ale z určitých důvodů potřebuji mít začátek následujícího obsahu na pixel přesně hraničící s navigací a výška navigačního pruhu nemusí být fixní...

Poradíte mi, jak to nastavit?

<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>

    <!-- Navbar Start-->
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background: black;">
        <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav mx-auto p-4 p-lg-0">
                <a href="#" class="nav-item nav-link active">Jedna</a>
                <a href="#" class="nav-item nav-link">Dva</a>
                <a href="#" class="nav-item nav-link">Tři</a>
                <a href="#" class="nav-item nav-link">Čtyři</a>
            </div>
        </div>
    </nav>
    <!-- Navbar End -->

    <!-- Kontejner Start-->
    <div class="container-fluid p-0">
       Abcd<br>efgh<br>ijkl<br>mnop
    </div>
    <!-- Kontejner End-->


    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>

Nahlásit jako SPAM

IP: 95.140.241.–

peter

~ Anonymní uživatel
~ 4017 příspěvků

před 4 hodinami #2

hm, ne uplne to chapu. U CSS zalezi na poradi trid, podle toho prepisuje vlastnosti.
Fixed-top by melo fungovat asi stejne jako position:absolute. Pokud ne, tak si tam pridej tridu a dej ji position:absolute; Koukam, ze ma primo position-absolute class, takze nemusis pridavat vlastni :)

BT tam ma jeste sticky.
https://getbootstrap.com/…rs/position/
https://getbootstrap.com/…es/position/

Ja to obvykle delam tak, ze si udelam jednoduchy web pomoci BT a nejake spesl chovani si tam definuji pres vlastni class. Pac je to rychlejsi, nez zjistovat, zda to BT umi nebo ne :)

jeste bys mohl pouzit nav-tab, pripadne drop-down
https://getbootstrap.com/…s/navs-tabs/
https://getbootstrap.com/…ents/navbar/#…
https://getbootstrap.com/…s/navs-tabs/#…

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" 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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

Nahlásit jako SPAM

IP: 2a00:1028:de00:354:6a40:37f8:4bdb:7c5b...–