{"id":5752,"date":"2024-10-08T14:55:39","date_gmt":"2024-10-08T14:55:39","guid":{"rendered":"https:\/\/outstandingthemes.com\/comment-creer-une-barre-de-navigation-collante-avec-css\/"},"modified":"2024-11-18T22:13:40","modified_gmt":"2024-11-18T22:13:40","slug":"comment-creer-une-barre-de-navigation-collante-avec-css","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/fr\/comment-creer-une-barre-de-navigation-collante-avec-css\/","title":{"rendered":"Comment cr\u00e9er une barre de navigation collante avec CSS :"},"content":{"rendered":"\n

La cr\u00e9ation d’une barre de navigation collante est un excellent moyen d’am\u00e9liorer l’exp\u00e9rience de navigation sur votre site web. Mais comment cr\u00e9er une barre de navigation collante avec CSS<\/a>. <\/p>\n\n

Vous trouverez ci-dessous les instructions \u00e9tape par \u00e9tape, accompagn\u00e9es d’extraits de code que vous pouvez facilement copier sur votre site Web WordPress :<\/p>\n\n

1. Mise en place de la structure HTML<\/h2>\n\n

Commencez par mettre en place une structure HTML de base. Celle-ci comprend un \u00e9l\u00e9ment <header><\/code> pour la barre de navigation et un \u00e9l\u00e9ment <section><\/code> pour le contenu. <\/p>\n\n

htmlKopier kode<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Sticky Navbar<\/title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n  <header class=\"navbar\">\n    <nav>\n      <ul>\n        <li><a href=\"#\">Home<\/a><\/li>\n        <li><a href=\"#\">About<\/a><\/li>\n        <li><a href=\"#\">Services<\/a><\/li>\n        <li><a href=\"#\">Contact<\/a><\/li>\n      <\/ul>\n    <\/nav>\n  <\/header>\n\n  <section class=\"content\">\n    <h1>Scroll Down<\/h1>\n    <p>Content goes here...<\/p>\n    <p>More content here...<\/p>\n    <p>Keep scrolling to see the sticky effect in action.<\/p>\n  <\/section>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n
\n\n
2. CSS pour le stylisme de base<\/h2>\n\n
Ajoutez le CSS suivant pour styliser la barre de navigation et le contenu. Cela permet de d\u00e9finir l’apparence de la barre avant de la rendre collante. <\/p>\n\n
cssKopier kode\/* styles.css *\/\n\n\/* Reset basic styling *\/\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n}\n\n.navbar {\n  background-color: #333;\n  color: white;\n  padding: 10px 0;\n  text-align: center;\n}\n\n.navbar ul {\n  list-style: none;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar li {\n  margin: 0 15px;\n}\n\n.navbar a {\n  color: white;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n\/* Content section styling *\/\n.content {\n  padding: 50px;\n  background-color: #f4f4f4;\n  height: 2000px; \/* For demonstration purposes *\/\n}\n<\/code><\/pre>\n\n
\n\n
3. Faites en sorte que la barre de navigation soit collante<\/h2>\n\n
Pour que la barre de navigation reste en haut lorsque vous faites d\u00e9filer la page, ajoutez la propri\u00e9t\u00e9 position: sticky<\/code>.<\/p>\n\n
cssKopier kode\/* Make navbar sticky *\/\n.navbar {\n  position: sticky;\n  top: 0;\n  z-index: 1000; \/* Keeps the navbar above other content *\/\n}\n<\/code><\/pre>\n\n
\n\n
4. Comment fonctionne la position collante<\/h2>\n\n