Wie behebe ich meine Position mit dem Problem mit der Navigationsleiste?

Question

Ich erstelle eine reaktionsschnelle Website mit einer Kopfzeile über der Navigationsleiste. Mein Ziel ist es dann natürlich, dass die Navigationsleiste beim Scrollen nach unten oben bleibt.

Ich bin neu in HTML und CSS , daher bin ich mir nicht sicher, ob die Reihenfolge oben in CSS angegeben werden soll Klassencode für die Navigationsleiste sollte sein. Aber nur für den Fall, dass ich position:sticky; an die Spitze gesetzt habe und dann den Wert top:0; an zweiter Stelle. Ich habe auch versucht, es direkt in den Kopf zu setzen. Aber ohne Erfolg. Ich werde den Code einschließen, damit Sie ihn sehen können.

.navbar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: black;
  height: 74px;
  overflow: hidden;
  margin: 0px 1px 0px 1px;
  border: 1px;
  border-radius: 4px;
  border-style: solid;
  border-color: #A6A6A6;
}

<nav>
  <div class="navbar">
    <a href="#">
      <button class="btn text1">Text 1</button>
    </a>
    <a href="#">
      <button class="btn text2">Text 2</button>
    </a>
    <a href="#">
      <button class="btn text3">Text 3</button>
    </a>
    <a href="#">
      <button class="btn text4">Text 4</button>
    </a>
    <a href="#">
      <button class="btn text5">Text 5</button>
    </a>
  </div>
</nav>

html css position sticky

0

aephereus 7 Okt. 2020 im 00:39

Answer 1

Position hinzufügen: klebt am Elternteil. (Stellen Sie außerdem sicher, dass Sie immer nach Browserkompatibilität suchen.)

nav {
 position: sticky;
 top: 0;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;    
  background-color: black;
  height: 74px;
  overflow: hidden;
  margin: 0px 1px 0px 1px;
  border: 1px;
  border-radius: 4px;   
  border-style: solid;
  border-color:#A6A6A6;   
 }

Arbeitsgeige: https://jsfiddle.net/9fvwp7x1/5/

0

yonderboy 6 Okt. 2020 im 22:37

Answer 2

Machen Sie die Klasse navbar fest. Es wird es dort kleben. So oder so wird es nicht kleben. Beispiel;

.navbar{
  position: fixed;
  top: 0;
}

0

Arda Yasar 6 Okt. 2020 im 22:30

Wie behebe ich meine Position mit dem Problem mit der Navigationsleiste?

2 Antworten

Verwandte Fragen

Neue Fragen

html