Hello, I want to make a Blurry Transparent Sticky Header for this website mobilehub.ro, I saw that you already have the option in Header Template – Reel News PRO, I now use Blank – Header Template and I want to make the header sticky like here ” https://www.apple.com/ro/”
Salut,
Revin cu cateva precizari si inca alte cateva puncte pe care as vrea sa le ating cu tema dumneavoastra, pentru ca am vazut ca se mai discuta in Romana si pentru a ma face si mai bine inteles, doresc sa va explic in romana, ceea ce doresc sa fac, si in cazul in care se poate sa gasesc raspuns aici.
1. Pentru a face meniul sticky blurry, doresc un css pentru versiunea stock a temei si nu pentru un alt template din cloud templates, acest lucru din cauza faptului ca am reusit sa customizez pe plac fara a mai avea nevoie de alte elemente de header. CSS-ul il voi baga in custom code. De asemenea doresc ca acest efect sa apara si pe mobil. In trecut foloseam jnews iar codul era “/* Make Sticky Header Blurry and Transparent */
.jeg_header_sticky .jeg_stickybar {
backdrop-filter: saturate(180%) blur(20px); /* Blurry */
background: rgba(255,255,255,0.7); /* White Opacity 70% */
}
/* For Mobile */
.jeg_navbar_mobile {
background:unset;
}
.jeg_navbar_mobile .jeg_mobile_bottombar {
backdrop-filter: saturate(180%) blur(20px); /* Blurry */
background: rgba(0,0,0,0.1); /* Black Opacity 10% */
}”
Doresc acum pentru aceasta tema, dupa cum am aratat mai sus, ceva in stilul site-ului de la apple https://www.apple.com/ro/.
2. Vreau ca marginile imaginii reprezentative sa atinga marginile in varianta mobila, precum in imaginea atasata, iar pe desktop sa ramana asa cum este acum. Am cautat sa fac setarea asta dar nu am reusit. (https://i.imgur.com/L2sw5Of.jpg)
3. Doresc sa pun un buton de “follow on google news”, care sa fie inline cu butoanele de share atat pe mobil cat si pe desktop. Se poate seta inline pentru “inline text” si sa pun codul html, insa din pacate pentru share post buttons nu. Am incercat din tab-ul “CSS” sa selectez in loc de “show”, “inline”, insa nu a functionat pe mobil. (https://i.imgur.com/IdNc5wt.jpg).
Acestea sunt modificarile pe care doresc sa le aduc site-ului pentru un aspect mai modern si de lunga durata. Sper ca ma puteti ajuta.
Va multumesc!
Buna,
De obicei pe forum scriem in engleza pentru a ajuta si alti utilizatori, dar acum o sa facem o mica exceptie.
1. Se poate folosi acest css pentru desktop
.td-header-menu-wrap.td-affix{
backdrop-filter: saturate(180%) blur(20px); /* Blurry */
background: rgba(255,255,255,0.7); /* White Opacity 70% */
}
Pentru mobil
body .td-header-wrap .td-header-main-menu, .td-header-menu-wrap.td-affix {
backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.1);
background-color: transparent !important;
}
Va trebui ca pentru elementele din meniu sa schimbati culoare de pe alb pe negru.
2. Trebuie sa setati cu tagDiv Composer pe elementul de featured image in viewport-ul mobil in tabul de css margine stanga si dreapta cu -20 – https://i.imgur.com/q7ShD5r.png
3. Dca functioneaza pe desktop se poate si pe versiunea mobila, trebuie sa selectati elementul in viewport-ul mobil si sa setati elementul the share sa fie inline – https://i.imgur.com/9c2SQUn.png poti fi mai multe solutii dar acum nu vad acest buton pe site pentru a oferi un exemplu mai concret.
Sper ca raspunsurile mele sa va ajute!
Buna ziua,
Multumesc frumos pentru raspuns, puncele 2 si 3 au fost rezolvate cu succes, intr-adevar la punctul 3 am omis sa selectez si mobile la viewport.
Legat de punctul 1, am uitat sa precizez ca pentru header-ul de acum as vrea un cod ce sa se potriveasca pe dark, de exemplu eu folosesc fundalul: #0a0c0d, in rest totul functioneaza cum trebuie.
Va multumesc mult!
Buna,
Te rog incerca acest css pentru deskto:
body .td-header-wrap .td-header-main-menu, .td-header-menu-wrap.td-affix {
backdrop-filter: saturate(180%) blur(5px);
background: rgb(55 25 25 / 29%);
}
Daca nu este ce trebuie, te rog sa-mi dai un exemplu de cum sa fie.
Salut, am adaptat un pic codul iar pe desktop cu acesta:
body .td-header-wrap .td-header-main-menu, .td-header-menu-wrap.td-affix {
backdrop-filter: saturate(180%) blur(5px);
background: rgb(10 12 13 / 35%);
}
Arata in regula (imagine), totusi pe mobil nu functioneaza.
Mai departe, ca si exemple, puteti vedea site-ul https://wccftech.com/ (pe dark mode). (imagine 1 / imagine 2)
Va multumesc!
De asemenea, mai vin o cu problema legata de butonul cu follow us on google news.
Am facut teste atat cu o imagine webp cat si cu un svg (ceea ce folosesc in momenul de fata) iar rezulatele sunt aceleas, se poate verifica si aici: https://pagespeed.web.dev/report?url=https%3A%2F%2Fmobilehub.ro%2Fstiri%2Fvivo-x90-ajunge-pe-piata-globala-vezi-specificatii-si-preturi%2F&hl=ro&form_factor=mobile. (imagine)
Problema pe care o puteti vedea si in acest video este ca imaginea “sare” si creeaza CLS.
Pare ca problema nu este din HTML, care este acesta:
Ci mai degraba din setarile facute pentru a putea alinia elementele. Exista vre-o solutie?
Buna,
Pentru mobil incerca te tog acest cod, a trebui sa apara asa – https://i.imgur.com/1pyaHgf.png
body .td-header-wrap .td-header-main-menu, .td-header-menu-wrap.td-affix {
backdrop-filter: saturate(180%) blur(5px);
background: rgb(10 12 13 / 35%);
background-color: rgb(10 12 13 / 35%)!important;
}
Acum despre problema cu CLS, intradevar apare pe acel element, dar acesta este mica, 0, 012, care este mai mare este referitoare la randul (row-ul) care contine featured image 0,094 – https://i.imgur.com/r3cEdih.png din pacate nu exista o optiune in tema care sa optimmizeze aceste “probleme” automat, de cele mai multe ori este nevoie de interventie manuala.
