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!
Code: Konfiguracja > Wygląd > Aktywny styl graficzny > Własny styl css Code: .login-bar { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; } header { padding-top: 65px; }
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: Code: @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 Code: @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. Code: @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. Code: @media (max-width: 800px){ tutaj wstawiasz CSS }
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
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.
