HTML Bootstrap: Header fixieren

[Pfandfinder]

ich habe eine Website mit bootstrap und diesen header:

<div class="container">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
        <a href="/" rel="noopener" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
        <span class="fs-4">titel</span>
        </a>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="/" rel="noopener" class="nav-link px-2 link-secondary">Home</a></li>
        </ul>
    </header>
</div>

ich möchte dass der header fixed ist oben. in der Doku finde ich dazu Code, aber ich bekomme es nicht so hin, wie der header jetzt aussieht. hiermit ist der titel jetzt ganz links und "Home" ganz rechts. Es sieht einfach nicht so aus wie vorher, vom style fehlen die Klassen aus "header"... füge ich den <header> tag mit ein, ist es komplett kaputt.

<nav class="navbar sticky-top navbar-light bg-light">
    <a href="/" rel="noopener" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
    <span class="fs-4">titel</span>
    </a>

    <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
        <li><a href="/" rel="noopener" class="nav-link px-2 link-secondary">Home</a></li>
    </ul>
</nav>

kann jemand helfen ?

 

[chris221177]

Warum baust Du denn die ganze HTML Struktur um?
Eigentlich reicht es, wenn Du Deinem äußeren div einfach die Klasse "sticky-top" mit gibst.

 

[Pfandfinder]

das geht zwar aber dann ist der text in dem Header drin, ich hoffe man erkennt das auf dem screenshot so. die beiden fetten Überschriften dürfte man eigentlich nicht sehen

 

[kim88]

Steht doch in deiner verlinkten Doku:

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

"fixed-top" ist das was du suchst

 

[Pfandfinder]

nein.

 

[Midnight Sun]

Schau mal hier wie das dort aufgebaut ist: https://getbootstrap.com/docs/3.4/examples/navbar-fixed-top/

 

[chris221177]

<div class="container sticky-top bg-white">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
        <a href="/" rel="noopener" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
        <span class="fs-4">titel</span>
        </a>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="/" rel="noopener" class="nav-link px-2 link-secondary">Home</a></li>
        </ul>
    </header>
</div>

Gib dem Container noch eine Hintergrundfarbe, per default ist der transparent. Sonst läuft der Text des folgenden Containers beim scrollen durch. Gegebenenfalls kann der folgende Container noch einen Margin-top bekommen.

Schau mal hier wie das dort aufgebaut ist: https://getbootstrap.com/docs/3.4/examples/navbar-fixed-top/

Eventuell die aktuelle / eingesetzte Version der Dokumentation benutzen.

 

[Midnight Sun]

Ob 3.4 oder 4.x ist erstmal egal, es geht um den Aufbau: "fixed-top" bleibt, was er braucht.

 

[kim88]

"fixed-top" ist das was du suchst

Ob 3.4 oder 4.x ist erstmal egal, es geht um den Aufbau: "fixed-top" bleibt, was er braucht.

nein.

Doch.

Fixed Top macht genau das was du gefragt es -> es fixiert dein header oben.

 

[Midnight Sun]

kann jemand helfen ?

Bist du schon weiter gekommen?