Näytä valikko CSS-valitsimessa

Ohje Kaikki paketit 2 min lukuaika

Sovellus sijoittaa valikkosi jokaisen valitsinta vastaavan elementin sisään ja korvaa sen sisällön. Käytä tätä mukautetuissa tai paljon muokatuissa teemoissa, joissa Korvaa automaattisesti ja Korvaa nykyinen valikko eivät toimi, tiettyyn kohtaan tai valikoille, jotka näkyvät vain tietokoneella tai vain mobiilissa.

Huomio

Sovellus suosittelee tätä vaihtoehtoa kehittäjille tai silloin, kun muut vaihtoehdot eivät toimi. Eivätkö CSS-valitsimet ole tuttuja? Ota meihin yhteyttä, niin asennamme valikon puolestasi maksutta.

Määritä CSS-valitsimet

1. Valitse Näytä valikko tässä CSS-valitsimessa

   Klikkaa valikkoeditorin vasemmassa palkissa Asetukset-välilehteä. Valitse kohdassa Sijainti Näytä valikko tässä CSS-valitsimessa.

   

   Näytä valikko tässä CSS-valitsimessa ja sen kaksi valitsinkenttää

2. Kirjoita valitsimet

   Täytä kaksi kenttää, jotka on kuvattu kohdassa Asetukset. Harmaat #SiteNav ja #AccessibleNav ovat paikkatekstejä, eivät tallennettuja arvoja.

3. Tallenna ja julkaise

   Klikkaa Tallenna ja julkaise valikko. Tarkista kauppasi tietokoneella ja mobiilissa.

Asetukset

Päävalikkosi CSS-valitsin

Elementti, joka sisältää tietokoneen valikkosi, esimerkiksi #SiteNav, .header__inline-menu tai nav.main-menu. Jätä tyhjäksi, jos haluat näyttää valikon vain mobiilissa.

Mobiilivalikkosi CSS-valitsin

Elementti, joka sisältää mobiilivalikkosi, esimerkiksi #AccessibleNav tai .menu-drawer. Jätä tyhjäksi, jos haluat säilyttää teemasi mobiilivalikon (vain tietokone).

• Useita elementtejä: erota valitsimet pilkuilla, esimerkiksi .header__inline-menu, .sticky-header nav. Valikko lisätään jokaiseen osumaan.
• Yksi elementti molemmille asetteluille: kirjoita sama valitsin molempiin kenttiin. Sovellus vaihtaa tietokone- ja mobiiliasettelun välillä näytön koon mukaan.
• Valitse säiliö, älä yksittäistä linkkiä: valitse elementti, joka ympäröi koko valikkoa (yleensä <nav> tai <ul>), muuten valikko päätyy yhden kohteen sisään.
• Suosi pysyviä valitsimia: ID:t tai teeman luokat, kuten .header__inline-menu. Automaattisesti luodut valitsimet, kuten body > div:nth-child(3) > …, rikkoutuvat, kun teema muuttuu.

Etsi CSS-valitsin

Voit myös klikata kenttien alla Miten löydät valikkosi CSS-valitsimen?.

1. Tarkastele valikkoa

   Avaa kauppasi Chromessa, napsauta valikkoa hiiren kakkospainikkeella ja valitse Inspect (Tarkista).

2. Etsi valikon säiliö

   Vie hiiri Elements-paneelin tagien päälle. Etsi lähin <nav> tai <ul>, jonka korostus kattaa koko valikon.

3. Kopioi valitsin

   Käytä merkkiä # ja sen id:tä (#SiteNav) tai merkkiä . ja selkeää luokkaa (.header__inline-menu). Muussa tapauksessa napsauta tagia hiiren kakkospainikkeella, valitse Copy > Copy selector ja liitä valitsin sovellukseen.

4. Toista mobiilille

   Klikkaa DevToolsin laitekuvaketta, valitse puhelin ja avaa mobiilivalikko (hampurilaiskuvake). Toista vaiheet saadaksesi mobiilivalitsimen.

Vinkki

Testaa valitsin ennen tallentamista: suorita DevToolsin Console-välilehdellä document.querySelectorAll('your-selector'). Tyhjä luettelo tarkoittaa, että valitsin on väärä.

Haluatko valikon kohtaan, jossa teemassasi ei ole valikkoa lainkaan? Katso Lisää mukautettu valikon sijainti.

Aiheeseen liittyvät sivut

• Lisää mukautettu valikon sijaintiNäytä valikko juuri haluamassasi kohdassa lisäämällä oma säiliö teeman koodiin.
• Voinko käyttää eri valikkoa tietokoneella ja mobiilissa?Näytä yksi valikko tietokoneella ja toinen mobiilissa, tai piilota joitakin kohteita laitteittain.
• Miksi valikkoni ei näy kaupassani?Vaiheittainen tarkistuslista, kun valikko puuttuu kaupastasi tai näyttää väärältä.

Oliko tästä apua?

Ilmoita ongelmasta