Je travaille sur les requêtes média pour un site et je suis bloqué sur une image logo statique qui se trouve dans l'en-tête mais seulement lorsque la taille de l'écran est min-width 960px.CSS - requêtes média/RWD, fichier d'image logo se cachant derrière nav
Au-dessus de cette taille, j'ai une image de logo de particule interactive mais quand l'écran est réduit à la taille de mobile, je veux juste un logo dans l'en-tête. Le problème est que le logo ne montre tout simplement pas. Je soupçonne qu'il est caché par la barre de navigation qui est fixée en position.
Voilà comment j'ai mon code pour le moment -
<header>
<div id="logo"> <img src="images/havoc_logo.png"> </div>
<nav>
<a href="#particle-slider">Home</a>
<a href="#whatwedo">What we do</a>
<a href="#whoweare">Who we are</a>
<a href="#partners">Who we work with</a>
<a href="#contact">Say hello</a>
<a href="Blog">Blog</a>
</nav>
</header>
interroge styles.css/media
#logo {
width: auto;
height: auto;
}
#logo img {
width: 200px;
height: 100px;
}
/* RWD for logo (particle-slider is id for interactive logo) */
@media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
@media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
@media screen and (max-width: 480px) {
body {
max-width: 500px;
}
header {
height: auto;
}
nav {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
border-bottom: 0;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
}
Alors, quand je recule la bonne page vers le bas pour 480px ou moins alors rien ne montre dans l'en-tête autre que la barre de navigation. Comment afficher l'image du logo dans l'en-tête lorsque je réduis la page?
pls fournissent un travail jsFiddle –
Selon votre code, pour les grandes tailles (min-width: 480px), vous avez masquer le logo principal et moins de 480px, le logo apparaîtra dans votre page. Alors, que devez-vous faire exactement? – sajee
@sajee Mon problème est, le logo ne montre pas quand je rétrécis l'écran et j'ai besoin de savoir pourquoi. –