Bootstrap 5_sticky-top_funktioniert nicht

S

sabrinkel

Grünschnabel
Halli-hallo
Ich mal wieder :rolleyes:

die scheinbar einfach Klasse "Sticky-top" funktioniert bei mir nicht.
Ich verwende die Browser Google Chrome und Firefox. Heut ist der Knoten drin. Mach ich was falsch?

Vollständige Datei siehe Anhang

Hier mein Code:

HTML: 
<body>
    <header>
        <div class="container-fluid">
            <nav class="navbar navbar-expand-lg bg-white">
                <a href="index.html" class="navbar-brand text-dark">
                    <img src="img/weltreligionen.svg" alt="Logo" width="90" />
                    <span class="ml-1">Welt der Religionen</span>
                </a>
            </nav>

            <!-- Ab hier soll die Navileiste oben stoppen -->

            <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-main">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="nav-main">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item active">
                            <a href="#" class="nav-link text-white">Museum</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
 

Anhänge

  • sticky-top.zip
    1,9 KB · Aufrufe: 0
Zuletzt bearbeitet von einem Moderator:
Da musste ich jetzt ein wenig suchen und habe die Lösung hier gefunden:
Why is my position:sticky not working?
position:sticky funktioniert nicht wenn ein Elternelement display:block hat.
Erstaunlich, dass man weder bei Selfhtml noch MDN einen Hinweis darauf findet.
Dieses CSS behebt das Problem:
CSS: 
header,
header>div.container-fluid {
    display: initial;
}
 
Zuletzt bearbeitet von einem Moderator:
Hi @sabrinkel,
kannst Du in Zukunft bitte für Code auch die Codeblocks im Editor verwenden?
Unformatierter Code ist schwer zu lesen. Am besten ist natürlich das verwenden eines Onlineeditors wie Codepen, JsBin etc.

Wenn Dein Beitrag erledigt ist kannst Du dieses bitte auch als erledigt kennzeichnen?
Wenn es mehrere Antworten gibt ist auch die Kennzeichnung einer Antwort als Lösung sinnvoll.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück