Pierwszy element menu jako ikona - media queries & responsywność (PrestaShop)

Question

Witam serdecznie!

Jest to moja pierwsza wiadomość tutaj i chciałbym poprosić o pomoc z pewną zagwozdzką dotycząca zamiany elementu w menu na ikonę. Na ten moment eksperymentuję na stronie lokalnej, ale poniższe demo dobrze oddaje układ CSS w szablonie nad któym pracuję:

http://livedemo00.template-help.com/prestashop_53577

Zasadniczy problem sprowadza się do uzyskania poprawnego wyglądu (tylko ikona jako pierwszy element menu) na urządzeniach mobilnych, czyli np. dla max-width wynoszącego 767 px. Tutaj co prawda kategoria jest pierwszym elementem menu, ale docelowo chodzi o zamianę "Stroną Główna" na zwykła ikonę dostępna poprzez FontAwesome.

Edycji css dokonywałem z poziomu konsoli w przeglądarce i chodzi tutaj o dwa pliki, a mianowicie:

blocktopmenu.css (cały kod http://pastebin.com/PzyhH9x6)

dodany kod:

.stickUpTop.isStuck .sf-menu li:first-child a:before {
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 55px;
  color: black;
  text-indent: 0;
  width: 0;
  left: 0;
}

.stickUpTop.isStuck .sf-menu li ul li a:before {
  content: none!important;
}
.stickUpTop.isStuck .sf-menu li:first-child a:after{
  width: 0;
}

oraz superfish-modified.css (cały plik http://pastebin.com/f2JG4hnT)

dodany kod:

.sf-menu li:first-child a { 
text-indent: -9999em; 
white-space: nowrap; 
} 

.sf-menu li:first-child a:before{ 
content: "\f015"; 
font-family: "FontAwesome"; 
display: inline-block; 
font-size: 33px; 
line-height: 70px; 
color: black; 
text-indent: 0; 
width: auto; 
left: 0; 
} 

.sf-menu li ul li a:before{ 
content:none!important; 
}

 

Niestety efekt wygląda jak w załączniku - to znaczy na urządzeniach mobilnych pierwszy element menu jest zupełnie pusty i występują różnicę w klasach zawartych w media queries.

 

Z góry dziękuję za wszelkie cenne wskazówki, aby na wersji resposnywnej również wymusić wyświetlenie ikony zamiast tekstu. 

Answer 1

Wrzucisz gdzieś na serwer ? takie rzeczy najłatwiej analizuje się przez narzedzia w przeglądarce. Nawet może być wygenerowany plik.html byle to otworzyć gdzieś jako strone internetową.

Comments

Na tym demo można spróbować testować:

http://livedemo00.template-help.com/prestashop_53577

Na ten moment ikona już się wyświetla dzięki wymuszeniu

.sf-menu li:first-child a:before {
    position: absolute;
}

ale są jeszcze pewne problemy z niepotrzebnym wpływem text-indent na elementy potomne (po rozwinięciu kategorii elementy podkategorii są przesunięte).

 

 

Answer 2

Ja bym po prostu do tego hiperłącza dołożył element span, w którym umieściłbym treść linku i przy mniejszych rozdziałkach to temu span nadał odpowiednie style:

.sf-menu li:first-child a > span
{
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

I pozbył się text-indent dla linka.

Comments

Dziękuję za cenną wskazówkę. Spróbuję poeksperymentować. Jednocześnie chciałbym uprzejmie poprosić o weryfikację następującego podejścia:

Dodanie do superfish-modified następującego kodu (aby wymusić wyświetlanie ikony na wersji mobilnej)

.sf-menu li:first-child a:before {
    position: absolute;
}

 

Do tego jeszcze:

.sf-menu > li > ul > li:nth-child(n) a{

text-indent: 0;

}

Czy jest może jakiś lepszy sposób na pozbycie się wpływu text-indent na elementy potomne? Problem pokazany na załączonym obrazku. 

---

Raczej nie ma niestety.

---

Dziękuję bardzo za odpowiedź. Jeżeli jest taka możliwość, proszę o końcową weryfikację. 

Cały zaktualizowany kod dla superfish-modified.css

http://pastebin.com/raw.php?i=E34zkEZS

blocktopmenu.css bez zmian:

http://pastebin.com/raw.php?i=PzyhH9x6

 

W superfish-modified dodany padding

@media (max-width: 767px) {
  .sf-menu > li:first-child {
    border-top: none;
    padding-left: 15px;
  }
}

oraz wyrównanie 

 

@media (max-width: 767px) {
  .sf-menu li:first-child a:before {
    top: -9px;
  }
}