Hej!
Om du ändrar med hjälp av anpassad CSS-kod så kan du lägga till följande kod innan din egen kod:
@media only screen and ( max-width: 480px ) {
din kod här
}
Observera att du kan behöva ändra 480px till det exakta pixelantal då din mobilmeny börjar synas (i Chrome kan du t.ex. se storleken på fönstret om du trycker F12 och sedan ändrar storleken på fönstret). Det koden gör är att den kod du lägger inom { } endast gäller om storleken på fönstret som visas är under 480px.
Trådstartare
anonymized-7517021
(@anonymized-7517021)
@jyourstone
Jag tror koden för Twenty Twelve är
@media screen and (min-width: 600px) {
}
Jag använder för närvarande följande kod
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
}
Ska jag ersätta ovanstående med nuvarande? Upplever varningar när jag använder ”media screen and” koden.
Trådstartare
anonymized-7517021
(@anonymized-7517021)
@jyourstone
Det kanske underlättar om jag visar hela min kod. Hur jag stylat om min meny.
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
padding: 0 10px;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 1.428571429;
font-weight: normal;
color: #7c7c7c;
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
Trådstartare
anonymized-7517021
(@anonymized-7517021)
Nu fattar jag! Jag ska alltså omsluta min kod med media screen koden.
Exempel:
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
din kod här
}
}
Hoppas detta hjälper andra noviser. 🙂
Ja precis, rätt uppfattat 🙂
Tack för att du skrev ditt svar så att andra kan få hjälp!
