Zakotwiczenie górnej belki - szablon RWD

Witam serdecznie,

czy jest "prosta" metoda zakotwiczenia górnej belki (w wypadku mojej strony chodzi o belkę z kontaktami i logowaniem/rejestracją - www.fajerwerkilider.pl ) ?

Poprzez zakotwiczenie mam na myśli to, że w momencie gdy przewijamy stronę w dół, belka nie zmienia położenia i "płynie" wraz ze stroną.
Przykład na www.pirotechnicy.com

Z góry dziękuję i pozdrawiam!

 

Kod:

Konfiguracja > Wygląd > Aktywny styl graficzny > Własny styl css

Kod:

.login-bar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}

header {
    padding-top: 65px;
}

 

niestety nie działa...

 

Widzę, że używasz szablonu RWD. Kod jest jak najbardziej poprawny. W tym przypadku musisz coś źle robić po swojej stronie.

Wprowadzenie proponowanych zmian w CSS-ie w 100% pozwoli Ci osiągnąć efekt tzw. "sticky" menu. Spróbuj raz jeszcze i przede wszystkim wyczyść potem pamięć podręczną przeglądarki (CTRL + SHIFT + DELETE).

 

zaskoczyło teraz za 100 razem. dziękuję bardzo za pomoc
((CTRL + SHIFT + DELETE jak mantra odkąd grzebie się w szablonie ).

 

@farsta jesteś pewna ze to dobry pomysł? W mobilnej wersji twojej strony ta "górna belka" zajmuje połowę ekranu.

 

Myślę, że nie najgorszy, jednak belka wymaga optymalizacji pod inne rozdzielczości. Można to zrobić w różny sposób w zależności jaki efekt autor chciałby uzyskać na każdej z nich.

 

W teorii można by element sticky zostawić tylko dla "zwykłych" komputerów czy laptopów, a na komórkach wyświetlać wszystko tak, jak było wcześniej.

Nie mam tutaj żadnej praktyki, dlatego pytanie jak w praktyce sprawdzają się reguły @media w CSS (czytałem, że nie zawsze są respektowane) ???

Z ciekawości spróbowałem takiego zapisu, bez sukcesu:

Kod:

@media handheld {
  .login-bar {
    position: static;
    z-index:0;
  }

 

Można przywrócić efekt normalnej belki, bez efektu "sticky" w rozdzielczościach w których belka rozjeżdża się w pionie, np, tak

Kod:

@media screen and (max-width: 990px) {
    .login-bar {
        position: static;
    }
}

Można też na każdej rodzielczości usunąć/zmniejszyć elementy które rozjeżdżają belkę również używając media queries.

 

A wiesz dla jakich urządzeń zadziała mój kod (@media handheld) ??? W teorii czytam o bezprzewodowych urządzeniach ręcznych/przenośnych, ale to pojęcie szerokie i nie widzę póki co żadnego efektu, gdzie bym nie sprawdzał.

 

To może zadziałać dla bardzo starych telefonów. Raczej się tego nie używa i targetuje po rozdzielczościach.

 

Tak, właśnie dzisiaj mnie z tym olśniło ... Póki co usuwam niestety, ale służę za obiekt doświadczalny gdyby ktoś miał pomysł jak to rozwiązać. Powyższe nie przynoszą efektu niestety

 

Przy moich projektach również korzystam z tego typu rozwiązania. Przykładowo, poniższym kodem usuwam sobie klasę wpadminbar przy pewnej wtyczce w Wordpres'ie.

Kod:

@media (max-width: 800px){ #wpadminbar {display:none;} html { margin-top: 0px !important;}}

W Twoim przypadku @farsta również możesz skorzystać z tego rozwiązania, aby przystosować wygląd szablonu sklepu przy różnych rozdzielczościach ekranu.

Kod:

@media (max-width: 800px){ tutaj wstawiasz CSS }

 

obawiam się, że tez nie działa

 

Nie potwierdzam.

Sugeruję także ponowić próby .

Działa jak należy po wyczyszczeniu pamięci (sticky tylko na laptopie, na komórce "po staremu").

 

Witam

Znalazłem takie - fajne rozwiązanie na górną belkę
https://krainalazienek.pl/
podpowiecie jak to zrobić

jeszcze jakby na tej belce znalazło się menu tak ja w linku to już byłby wypas

 

Witam

tak delikatnie daję temat w górę - może znajdzie się rozwiązanie

 

Jeśli mam być szczera to nie wiem czy to najlepszy pomysł. Mnie osobiście denerwuje, że belka zajmuje 1/4 ekranu, utrudnia czytanie i niszczy spójność tego całkiem fajnego szablonu. Samo rozsunięcie danych do kontaktu jest już natomiast fajne. Podoba mi się również pływająca sekcja producenci.

 

Plusy tego rozwiązania to stały dostęp do menu - w moim przypadku (dużo kategorii) to dość ważne
a co do szerokości tego paska to można go ograniczyć do menu plus pasek z wyszukiwarką logowaniem i koszykiem

 

ja bym to zrobił inaczej, przy małej rozdzielczości ukrył całkiem menu, a zrobiłbym malutkie pojawiające się tylko w tej rozdzielczości. Ja jestem zdania, że już przy rozdzielczości 600 i mniej px duża belka zaczyna być denerwująca.