wordpress a kotva na blogu

[janyX]

Povodne som chcel napisat na slovenske wp forum, ale ked som sa pozrel ako to tam zije (posledne prisprevky z pred roka a skoro kazdy bez odpovedi), tak som sa rozhodol, ze sa opytam tu.

Bezim na WP 5.4.2 so sablonou shapely. Je to uplne jednoduchy web bez akychkolvek zbytocnych pluginov. Top menu mam nastavene na sticky on top (neviem presne ako to nazvat, ale v ponuke shapely je zapnuta moznost header sticky). To znamena, ze ked rolujem na webe, tak menu je ukotvene k hornemu okraju prehliadaca, vid. napr. https://www.w3schools.com/howto/howto_j ... sticky.asp

Clanky pisem v gutenbergu a ked chcem vytvorit v clanku kotvu na nejaky odsek, tak vsetko funguje dobre, skoci to k hornemu okraju prehliadaca, ale problem je ten, ze menu je "sticky on top" a prekryva aspon 3-4 riadky textu, ktory by mal byt viditelny. Zatial sa mi to nepodarilo vyriesit. Riesenim by bolo zrusit sticky on top menu, ale to nechcem.

Vie niekto poradit ?

[Emil Pastelka]

Tohle není ani tak záležitost WP, jako CSS, případně JS. Pokud děláte kotvu tak, že v odkazu cílíte na ID daného prvku, pak můžete použít CSS pseudo selektor :target - ten se aplikuje na cíl odkazu po kliknutí na odkaz.

do CSS šablony vložte kód níže. I s obrázky je to popsáno zde.

Kód: Vybrat vše

:target:before {
content: " ";
display: block;
height: 90px; /* výška vašeho menu */
margin: -90px 0 0; /* záporná výška vašeho menu */
}


[janyX]

dik, ale nejak mi to nefunguje. Zrejme robim nieco zle.
Do hlavneho stylu css som vlozil

Kód: Vybrat vše

:target:before {
content: " ";
display: block;
height: 90px; /* výška vašeho menu */
margin: -90px 0 0; /* záporná výška vašeho menu */
}

a v gutenbergu som k nadpisu, kde som spravil kotvu pridal dodatocnu css tiedu

Kód: Vybrat vše

target:before

ale text je stale skryty pod top menu

[Emil Pastelka]

Zde vidím několik nedorozumění.
1) selektor :target je automaticky vytvořený prohlížečem po kliknutí na odkaz - prostě vznikne "cíl". Pokud jste to někam napsal ručně, smažte to.
2) po editaci CSS šablony ručně obnovte načtení stránky klávesami Ctrl+F5
3) "výška vašeho menu" je nápověda, abyste zadal správný údaj

Pokud to není tajné, pošlete mi odkaz na ty stránky, klidně jako SZ, a já se podívám, zda to funguje a jaké hodnoty byste tam měl zadat.

[janyX]

Ked som refreshol stranku tak to funguje dobre. Problem je este v tom, ze ked spravim kotvu (na nadpis H1,2 ...) a chcem cez odkaz na tu kotvu skocit tak sa okolo toho nadpisu (H1,2 ..) spravi cierny ramik.

To je uz ale asi zalezitost stylu css

[Emil Pastelka]

Ano, pokud budete takto cílit jen na prvky bez rámečku, lze do toho :target:before přidat řádek

Kód: Vybrat vše

border: none;


[janyX]

Dakujem Emilovi, vyriesil moj problem
V css subore bolo potrebne do sekcie normalize dat tento kod

Kód: Vybrat vše

*, input, select, textarea, option, button {
    outline: none!important;
}

a na koniec css stylu

Kód: Vybrat vše

@media only screen and (min-width: 450px) {
   :target:before {
      content: " ";
      display: block;
      height: 90px; /* výška vašeho menu */
      margin: -90px 0 0; /* záporná výška vašeho menu */
   }
}