La création d’une barre de navigation collante est un excellent moyen d’améliorer l’expérience de navigation sur votre site web. Mais comment créer une barre de navigation collante avec CSS.
Vous trouverez ci-dessous les instructions étape par étape, accompagnées d’extraits de code que vous pouvez facilement copier sur votre site Web WordPress :
1. Mise en place de la structure HTML
Commencez par mettre en place une structure HTML de base. Celle-ci comprend un élément <header> pour la barre de navigation et un élément <section> pour le contenu.
htmlKopier kode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
2. CSS pour le stylisme de base
Ajoutez le CSS suivant pour styliser la barre de navigation et le contenu. Cela permet de définir l’apparence de la barre avant de la rendre collante.
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px; /* For demonstration purposes */
}
3. Faites en sorte que la barre de navigation soit collante
Pour que la barre de navigation reste en haut lorsque vous faites défiler la page, ajoutez la propriété position: sticky.
cssKopier kode/* Make navbar sticky */
.navbar {
position: sticky;
top: 0;
z-index: 1000; /* Keeps the navbar above other content */
}
4. Comment fonctionne la position collante
position: sticky: Cette propriété CSS maintient l’élément dans sa position relative jusqu’à ce qu’une certaine position de défilement soit atteinte, après quoi il reste dans une position spécifiée (commetop: 0).top: 0: Définit la distance à laquelle la barre de navigation doit se situer par rapport au haut.z-index: 1000: Assure que la barre de navigation reste au-dessus des autres éléments.
5. Améliorations supplémentaires (facultatif)
Pour une meilleure esthétique, vous pouvez ajouter un effet d’ombre et une transition de la couleur d’arrière-plan.
cssKopier kode/* Optional enhancements */
.navbar {
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar.sticky {
background-color: #222;
}
6. Code HTML et CSS final
Vous trouverez ci-dessous le code complet de votre barre de navigation collante.
HTML
htmlKopier kode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
CSS
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
.navbar.sticky {
background-color: #222;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px;
}
7. Mise en œuvre dans WordPress
Pour ajouter ce code à votre site web WordPress:
- Code HTML:
- Utilisez le bloc HTML personnalisé dans l’éditeur WordPress.
- Collez le code HTML à l’intérieur de ce bloc à l’endroit où vous souhaitez que la barre de navigation et le contenu apparaissent.
- Code CSS:
- Allez dans votre tableau de bord WordPress.
- Naviguez vers Apparence > Personnaliser > Additional CSS.
- Collez le code CSS à cet endroit.
8. Vous êtes prêt !
Vous disposez maintenant d’une barre de navigation collante fonctionnelle sur votre site web. N’hésitez pas à personnaliser les styles pour les adapter au design de votre site.
