1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Wąski nagłówek nie ruszający się ze stroną

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 13 Luty 2016.

  1. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Miałem chwilę czasu więc zrobiłem aby nagłówek się nie ruszał podczas ruszania stroną i aby był nieco bardziej pojemny :)
    oto efekt:
    wersja duża:
    top1.png
    wersja po zmniejszeniu i na telefonie:
    top2.png

    Do własnego stylu dodajemy:
    Kod:
    .login-bar1 {
      position:fixed;
      z-index:99999;
      margin-top:0px;
      width:100%;
    }
    
    ul li, ol li {
      line-height: 0;
      margin-bottom: 0;
    }
    
    .login-bar a {
      color: #fff;
      display: inline-block;
      font-size: 1.1em;
      font-weight: normal;
      padding-top: 0.6em;
      padding-bottom: 0.6em;
      padding-right: 0.9em;
    }
    .login-bar .social {
      font-size: 1.1em;
      padding-top: 0.6em;
      padding-bottom: 0.6em;
      padding-right: 0.2em;
    }
    
    W edycji zaawansowanej w pliku: body_head.tpl szukamy takiej linii:
    Kod:
      {if 1 == $skin_settings->header->basket}
    
    i dalej takiej
    Kod:
      <header class="row">
    
    kod pomiędzy tymi liniami kasujemy (oczywiście te linie zostawiając)
    i zamiast tamtego kodu wstawiamy poniższy:

    Kod:
      {dynamic}
      <div class="login-bar1">
      <div class="login-bar">
      <div class="row container">
      <ul class="links right inline" style="float:left;">
      {if true == $user_logged}
      <li>
      <a> <img src="{baseDir}/public/images/1px.gif" alt="" class="px1" >
      <span class="fa fa-user"> {translate key="Hello"} <b>{$user->user->getName()|escape}</b></a>
      </span>
      </li>
      <li>
      <a href="{route key='panel'}" title="{translate key="My account"}">
      <img src="{baseDir}/public/images/1px.gif" alt="" class="px1" >
      <span class="fa fa-user"> {translate key="My account"}</span>
      </a>
      </li>
      <li>
      <a href="{route key='logout'}" title="{translate key='Sign out'}">
      <img src="{baseDir}/public/images/1px.gif" alt="" class="px1" >
      <span class="fa fa-sign-out"> {translate key='Sign out'}</span>
      </a>
      </li>
    {else}
      {if $enable_register}
      <li>
      <a href="{route key='register'}" title="{translate key='Create an account'}">
      <img src="{baseDir}/public/images/1px.gif" alt="" class="px1" >
      <span class="fa fa-user"> {translate key='Create an account'}</span>
      </a>
      </li>
      {/if}
      <li>
      <a href="{route key='login'}" title="{translate key='Sign in'}">
      <img src="{baseDir}/public/images/1px.gif" alt="" class="px1" >
      <span  class="fa fa-key"> {translate key='Sign in'}</span>
      </a>
      </li>
      {/if}
      <li >
      <a> <span class="fa fa-phone"> Infolinia: 800 123 456</span></a>
      </li>
      <li>
      <a> <span class="fa fa-envelope"> Email: info@domenasklepu.pl</span></a>
      </li> </ul>
      <ul style="float:right;">
      <li>
      <a class="social" href="linkdofanpage">  <span class="fa fa-facebook-square"></span></a>
      <a class="social" href="linkdoinstagramu">  <span class="fa fa-instagram"></span> </a>
      <a class="social" href="linkdotwittera">  <span class="fa fa-twitter"></span></a>
      <a class="social" href="linkdoyoutube"> <span class="fa fa-youtube-square"></span></a>
      </li> </ul> 
      </div></div></div>
      {/dynamic} 
      {/if}
    
    oczywiście maila możemy podlinkować jeśli chcemy pod cokolwiek dodając do a href=""
    zmieniamy na swoje linki do portali społecznościowych i tyle. Przydatna sprawa.
    Ważne:
    jeśli logo i koszyk wjedzie nam pod pasek musimy zmienić jeszcze w tym samym pliku linię:
    Kod:
    <div class="logo-bar row container">
    na np:
    Kod:
    <div class="logo-bar row container" style="margin-top:20px;">
    Ewentualnie podając większy margines górny np zamiast 20px można dać 30px;
     
    Ostatnia modyfikacja: 13 Luty 2016
    Darkas, Marand, expomoda oraz 1 dodatkowa osoba lubi tego posta.
  2. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    bardzo ladnie wyglada w poniedzialek napewno zmienie jak bedzie dzialal :D
     
  3. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    dziala super sprawa wklejony podmieniony teraz czekamy na menu minister :D
     
  4. Wrobel

    Wrobel Nowy użytkownik

    Wiadomości:
    4
    Docenione treści:
    2
    Rozwiązanie bardzo fajne, tylko jak zrobić, żeby nagłówek nie przysłaniał loga w skórce mobilnej? W zależności od szerokości, może on zajmować dwie lub trzy linie i trudno to jednoznacznie określić pikselami. Musiałem również wyłączyć
    Kod:
    ul li, ol li {
      line-height: 0;
      margin-bottom: 0;
    }
    bo zjeżdzał mi się teskt m. in. w stopce i przy bestsellerach.
     
    Mariusz lubi to.
  5. Mariusz

    Mariusz pomoc.home.pl home.pl Administrator forum

    Wiadomości:
    3 060
    Docenione treści:
    300
    @TheL sprawdziłem u siebie rozwiązanie i również miałbym takie samo pytanie... masz jakiś pomysł co zrobić, aby nagłówek nie zasłaniał loga w skórce mobilnej sklepu?
     
  6. Wrobel

    Wrobel Nowy użytkownik

    Wiadomości:
    4
    Docenione treści:
    2
    Ja to rozwiązałem w ten sposób, że poniżej pewnej szerokości pasek nie ma stałej pozycji na ekranie i można go normalnie przewinąć:
    Kod:
    @media (max-width:962px){
      .login-bar1 {
        position:static;
        margin-bottom:0px;}
      .login-bar a {line-height: 70%}
    }
    W zasadzie na telefonie, moim zdaniem, zajmuje za dużo miejsca i bardziej mi odpowiada taka modyfikacja.
     
  7. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Rozwiązanie jeśli chcemy go używać dostosować margin-top do naszego loga, dla media przy max-width np 768 dać inne, a dla powyżej inne. Trochę się trzeba pobawić aby dobrze sobie dopasować, jednak to już nie wina samego nagłówka, bo przy jednej wielkości loga jest już dopasowany :)
    Taki nagłówek działa już z powodzeniem w kilku sklepach, nawet w wersjach o wiele bardziej rozbudowanych :)
     
  8. Monika

    Monika Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    1
    Witam,
    Można prosić o wstawienie jeszcze ikonki z Google+ ?
    Dziękuje i pozdrawiam
     
  9. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    @Monika kod dla ikonki google +:
    Kod:
    <a class="social" href="linkdogoogle+"> <span class="fa fa-google-plus"></span></a>
    
    wstawiasz go tam gdzie inne inkonki z dokładnie takimi samymi linijkami
     
  10. pavali

    pavali Pomocnik

    Wiadomości:
    116
    Docenione treści:
    7
    @TheL zobacz na mój sklep www.smaily.pl
    *Jak mam zrobić aby było ten nagłowek na czarnym tle tak jak u Ciebie ?
    *Jak koszyk i opcje szukaj w sklepie przesunąć na dół
    *jak powiekszyc tn nagłowek tzn litery
     
  11. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    pavali jak zrobiles plugin z fb do komenarzy?
     
  12. Monika

    Monika Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    1
    Dziękuje :p;)
     
  13. Monika

    Monika Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    1
    ok wstawiłam na stronę, ale mam problem bo tekst mi się "zwinął" co może być przyczyną ? tak jest w każdym produkcie

    - skorzystałam z rozwiązania użytkownika Wróbel i jest już ok
     

    Załączone pliki:

    Ostatnia modyfikacja: 18 Marzec 2016
  14. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    to normalne, ja to robiłem akurat do mojej templatki i faktycznie w innej może się zwinąć text, rozwiązanie użytkownika @Wrobel niweluje ten efekt.
     
  15. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    @pavali jeśli z mojego kodu skasujesz koszyk to po jego wstawieniu powinien się pojawić pasek na górze, a szukajka i koszyk powinny zostać na swoim miejscu.
     
  16. Monika

    Monika Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    1
    Mam jeszcze małe pytanie. Da się zrobić, żeby ten pasek nie zajmował części nagłówka tylko był nad nim. Bo mi teraz nachodzi na nagłówek, a wcześniej ten czarny pasek był nad nim. Problem jest też przy zdjęciach produktów, po kliknięciu na zdjęcie powiększa się, a potem nie można go zamknąć bo znaczek "zamknij" jest akurat pod tym paskiem.
     

    Załączone pliki:

    Mariusz lubi to.
  17. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Jedyne rozwiązanie jakie przychodzi mi do głowy to zmniejszenie okienka obrazka, należy pamiętać, że pasek jest uruchomiony na sztywno. Można by było spróbować jeszcze dla okna obrazka dać z-index większy niż przy pasku przez co warstwa z okienkiem obrazka wyszła by jakby nad pasek.
     
  18. Mariusz

    Mariusz pomoc.home.pl home.pl Administrator forum

    Wiadomości:
    3 060
    Docenione treści:
    300
    Sprawdziłem i według mnie wystarczy zmienić jedną wartość w CSS.
    Kod:
    .login-bar1 {
        position: fixed;
    }
    ZAMIEŃ NA:

    Kod:
    .login-bar1 {
        position: inherit;
    }
    Sprawdziłem to "na szybko" i wygląda na to, że po wprowadzeniu tych zmian, we wszystkich możliwych scenariuszach wyświetlany jest poprawny żądany przez Ciebie efekt.

    PS. moim zdaniem ten nagłówek brzydko wygląda w wersji responsywnej. Zastanowiłbym się nad jego ukryciem na wersji mobilnej lub nad zmniejszeniem jego treści w wersji RWD. Gdy szerokość ekranu jest mniejsza, wydaję mi się, że pasek staje się za wysoki i zasłania za dużo ekranu, ale to tylko moja opinia :p
     
    Monika lubi to.
  19. Monika

    Monika Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    1
    Dzięki ;) Pasek jest teraz nad nagłówkiem, ale nie rusza się :p
    A można w pasku wstawić jeszcze np ikonkę z gg i skajpaja ?
     
  20. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    no i właśnie o tym mówiłem, Przy inherit wartość właściwości jest dziedziczona z elementu rodzica a tam fixed nie było. Tylko fixed zatrzyma pasek w ustalonym miejscu. Aby pasek był taki jak w moim przykładzie oraz aby był pod... należy innym elementom dać z-index wyższe lub paskowi niższe.
    To rozwiązanie całkowicie zmienia ideę paska.
     

Poleć forum znajomym