Maison > interface Web > tutoriel CSS > le corps du texte

Comment empêcher une barre de navigation supérieure fixe d'obscurcir le contenu de la page ?

Susan Sarandon
Libérer: 2024-11-10 06:33:02
original
783 Les gens l'ont consulté

How to Prevent a Fixed Top Nav Bar from Obscuring Page Content?

La barre de navigation supérieure obscurcit le contenu de la page

Comme le montre le code d'amorçage Twitter fourni, la barre de navigation supérieure fixe obstrue la partie supérieure du contenu de la page. Pour résoudre ce problème et garantir que le contenu soit visible sous la barre de navigation lorsque le haut de la page est consulté, la mise en œuvre d'une solution CSS est essentielle.

La solution proposée consiste à appliquer un padding à l'élément body avec une valeur de 60px. Cela place une marge entre le haut de la page et la barre de navigation, poussant ainsi le contenu sous la barre de navigation. Cependant, comme le framework Bootstrap intègre la réactivité, une requête multimédia supplémentaire est utilisée.

Avec la requête multimédia, lorsque la largeur de l'écran tombe en dessous de 979 px, le remplissage de l'élément corps est réinitialisé à 0 px, empêchant ainsi l'apparition d'un espace. entre le haut de la page et la barre de navigation sur les écrans plus petits. Cela garantit que le contenu est présenté de manière appropriée quel que soit l'appareil utilisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal