Miten mobiilisivun menu-valukon värit muutetaan?

Tarkoitatko alavalikolla sitä kohtaa valikosta, jossa lukee ”Etusivu”? Sen taustaväri tulee CSS:stä tällaisella valitsemella:

.top-nav-list li.current-menu-item > a

ja tuo on kohdistettu mobiiliin tällaisella:

@media only screen and (max-width: 767px)

Siispä jotenkin näin:

@media only screen and (max-width: 767px) {
.top-nav-list li.current-menu-item > a {
    background-color: uusi taustaväri.
}
}

Ihan oikea tarkistustyökalu sulla on käytössä. Kun klikkaan hiiren oikealla napilla tuossa alavalikon ”Päättyneet operaatiot”-kohdassa ja valitsen ”Tarkista elementti”, Chrome valitsee sen nimenomaisen elementin koodista.

Sitten vain oikean reunan ”Styles”-listasta etsimään, missä kohden taustaväri on määritetty. Taustavärin määritelmää ei kuitenkaan löydy, mistä voidaan päätellä, että sitä ei olekaan määritelty linkille eli A-elementille, vaan kenties vähän ylempänä.

Valitaan siis rakenteesta ylempi elementti eli LI, jonka sisällä A on, ja katsotaan sen tilannetta – ja sieltähän se taustaväri sitten löytyy.

Sieltä saadaan taustavärille tällainen määrittely, eli kyseinen taustaväri on määrätty käyttöön silloin kun ruudun leveys on korkeintaan 1024px:

@media screen and (max-width: 1024px)
#top-nav-list .haschild.open ul li {
    background-color: rgba(67,94,114,1) !important;
}

No toi #content h1 muuttaa h1-elementtejä. h2-elementtien kokoa mobiiliversiossa ei ole määritelty ollenkaan, eli laita tuohon CSS-tiedostoon sopivien @media-kohtien sisälle vaikka tällainen:

#content h2 {
font-size: 24px;
}

Lisäisin tuohon jonkun välimallin vielä, yli 767px leveillä näytöillä otsikot ovat turhan isoja.

Esim.

@media only screen and (min-width: 768px) and (max-width: 1200px)

ja tuohon vähän pienemmät otsikot.

Toinen vaihtoehto on ylipäätään pienentää noita otsikoita, toi 50px näyttää minusta tietokoneen näytölläkin turhan isolta. Joku 38px tms. olis vähän hillitymmän kokoinen, eikä tarvitsisi mitään lisäpienennyksiä pienemmillä näytöillä.

Sulla on muuten kaikilla sivuilla h1-otsikko, joka on piilotettu ja pääotsikkona h2, joka näkyy. Pystyisikö tekemään niin, että tuon h2-otsikon ottaisi pois ja tuon h1-otsikon muotoilisi samannäköiseksi kuin tuo nykyinen h2?