Wie kann ich eine feste responsive Top-Navigation erstellen?

Question

Ich möchte eine Top-Navigation "festen" Balken machen.
Ich experimentiere derzeit mit dem Code über W3C.

Leider ist die Navigationsleiste nicht fest, wie kann ich es behoben?

HINWEIS: Ich habe versucht position: fixed;, aber es funktioniert nicht wie erwartet.

Answer 1

Versuchen Sie, diese CSS:

.fixed-navbar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/position

Wenn Sie eine navbar verwenden wie die Sie in der Regel eine Höhe wollen wird es geben (zB 50px) und dann den Rest des Inhalts versetzt von so viel (zB margin-top: 50px; auf Ihren Content-Container

Answer 2

Wenn Sie kopieren ihren Code genau auf W3Schools und fügen Sie den folgenden auf die ul.

width: 100%; 
top: 0; 
left: 0; 
position: fixed; 

Sie erhalten eine feste Position auf der ul, es wird den ganzen Weg nach links geschoben (kein Abstand), und den ganzen Weg bis oben (ohne Abstand). Die Breite (100%) streckt den Block über den Webbrowser (in Bezug auf seine Größe). Sie könnten zusätzlich eine Klasse oder eine ID zu der bereits vorhandenen ul hinzufügen (falls Sie mehrere existente ul-Elemente haben), indem Sie div#fixed-navigation für die ID oder div.fixed-navigation für die Klasse (in CSS) verwenden.

Insgesamt haben Sie entweder: <ul id="fixed-navigation"> oder <ul class="fixed-navigation"> (wenn Sie ein ID- oder Klassenattribut verwenden möchten).

Ich habe ein funktionierendes Beispiel für Sie auf JSFiddle: https://jsfiddle.net/799rm54n/