Support » Teman » Mobilmenyn i TwentyTwelve

  • Löst Rebecka

    (@rebecka)


    Jag försöker omstyla menyn i temat TwentyTwelve men det påverkar också mobilmenyn (alltså menyn i mobilstorlek). Hur gör jag för att endast omstyla menyn men inte mobilmenyn?

    När jag stylar om menyn så påverkar det hur menyn ser ut i mobilstorlek när jag klickar på ”Meny” dvs. när menyn kollapsar ut eller vad man säger.

    Jag använder mig av ett barntema.

Visar 1 svar - 1 till 5 (av 5 totalt)
  • 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.

    @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.

    @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);
    }

    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!

Visar 1 svar - 1 till 5 (av 5 totalt)
  • Du måste vara inloggad för att svara på detta ämne.