Maison >interface Web >tutoriel CSS >Comment empêcher une barre de navigation supérieure fixe d'obscurcir le contenu de la page ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-10 06:33:02837parcourir

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!

Déclaration:
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