Wie kann ich diese Navbar fixieren?
Hallo,
ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?
Hier der HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Unser Shop</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="topnav">
<img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
<a class="active" href="index.html">Willkommen</a>
<a href="products.html">Unsere Produkte</a>
<a href="about-us.html">Über uns</a>
</div>
<div class="page">
<p> Willkommen! </p>
</div>
</body>
</html>
Und hier der CSS-Code:
body {
background-color: green;
margin: 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.page {
background-color: white;
margin-right: 125px;
margin-left: 125px;
padding-bottom: 85%;
}
2 Antworten
Eine weitere Möglichkeit wäre, die Navbar "fixed" zu machen, und dem Content darunter ein top-margin oder top-padding zu geben, das >= der Navbar-Höhe ist:
Der topnav-Klasse gibst du folgende Eigenschaften dazu:
position: fixed;
top:0;
left:0;
width:100%;
Und deiner page-Klasse (bzw. der Klasse des Divs, das den Rest der Seite umschließt), gibst du folgendes hinzu:
margin-top: 70px;
Hier mal wieder zum anschauen: https://jsfiddle.net/1xg2nmuw/
So macht es zum Beispiel auch GuteFrage. Früher war das der übliche Weg.
Gib deiner topnav-Klasse noch diese zwei Eigenschaften:
position: sticky;
top:0;
Hier siehst du dass es funktioniert: https://jsfiddle.net/9n1t52c0/
Vielen, dank :D