Otagowano: przewijanie grafik, przyklejone menu
- Ten temat ostatnio został zaktualizowany 1 rok, 1 miesiąc temu przez Katarzyna Masztaller.
- AutorWpisy
- 18/10/2023 o 11:13 #105351Dorota TrellaUczestniczka
Mam problem z wyświetlaniem grafiki i przyklejonego menu i nie wiem, co z tym zrobić.
Zablokowałam w obrębie komórki wyświetlanie grafiki, żeby napis przesuwał się, kiedy przewijany jest ekran. Działa to dobrze i dokładnie tak jak chciałam, jednak pojawia się problem, gdy grafika dociera do przyklejonego menu. Wtedy zamiast chować się pod menu, wyświetla się na nim – to wygląda kompletnie bez sensu. Nie wiem, jak to zmienić ani nawet, gdzie tego szukać.Czy możecie mi pomóc?
18/10/2023 o 18:13 #105374Paweł ZielińskiUczestniczkaCześć Dorota,
Akurat to jest b. Prosto naprawić.
Za kolejność wyświetlania jeden nad drugim odpowiada z-index w CSS czym wyższa wartość tym „bliżej ekranu” jest dany obiekt. Aby to opisać najłatwiej jak potrafię to jak byś patrzyła z góry na rozsypane kartki, które jednak na siebie zachodzą i ta która jest na górze czyli najbardziej widoczna ma najwyższy z-index.
Jak sobie poradzić:
Odszukaj element w którym masz górne menu i poszukaj opcji z-index i przypisz jej wartość na 999.
Odszukaj ten element i w dodaj w stylach CSS z-index: 999;To powinno rozwiązać problem.
Pamiętaj żeby wybrać cały element nie samo menu ale także tło do tego menu bo wtedy będziesz mieć treści między tymi elementami.
Pozdrawiam
Paweł20/10/2023 o 11:39 #105490Dorota TrellaUczestniczkaCześć,
Od wczoraj szukam z-index i niestety nie umiem go znaleźć.
Może coś robię źle – klikam ZBADAJ na menu i szukam w kodzie z-index, ale albo nie umiem szukać albo tego nie ma.20/10/2023 o 16:41 #105509Kaja RzeczkowskaModeratorkaHmmm. A czy próbowałaś już wejść w pliki CSS przez FTP, pobrać je i spróbować wyszukać ten fragment kodu, np. w programie Notepad++? Czy też szukasz przez Zbadaj?
Jeśli udostępnisz stronę do wglądu, możemy ewentualnie spróbować pomóc 🙂20/10/2023 o 18:08 #105511Dorota TrellaUczestniczkaCześć,
Nie próbowałam, nie wiem, jak to zrobić.
Strona jest udostępniona, jeśli możecie zerknąć, to będę wdzięczna.23/10/2023 o 19:11 #105569Paweł ZielińskiModeratorkaCześć Dorota,
pod pod jakim linkiem jest Twoja strona?
Pozdrawiam,
Paweł23/10/2023 o 21:18 #105573Dorota TrellaUczestniczkaPaweł,
Kasia udostępniła adres mojej strony na moderatorskim czacie. Nie wrzucam na otwartym forum linku do mojej rozgrzebanej strony. 🙂24/10/2023 o 12:24 #105588Paweł ZielińskiModeratorkaDorota,
Jakoś wczoraj nie połączyłem kropek…
Obejrzałem sobie Twoją stronę i mam pewne sposrzeżenia:
1. Masz zainstalowany motyw Astra
2. W menu nie chodzi ci o to, że coś jest nad a coś jest pod, tylko na komputerze masz menu, które podsuwa się do góry przy przewijaniu i tam się przykleja
3. Na mobilach to menu się nie przykleja
Odpowiadają za to klasy:
Komputer przed scrollem
ast-primary-header-bar ast-primary-header main-header-bar site-header-focus-item
Komputer po scrollu
ast-primary-header-bar ast-primary-header main-header-bar site-header-focus-item ast-sticky-active ast-sticky-shrunk ast-header-stickedMobil przed scrollem
ast-primary-header-bar ast-primary-header main-header-bar site-header-focus-item
Mobil po scrollu
ast-primary-header-bar ast-primary-header main-header-bar site-header-focus-itemZobacz, że w do klas w wersji mobilnej nie dodają się klasy „ast-sticky-active ast-sticky-shrunk ast-header-sticked” co powoduję że menu się nie przykleja.
Sprawdziłem i te opcje są dostępne w wersji płatnej – przynajmniej tak mi się wydaje.
Niestety nie wiem jaką wersję posiadasz.
Można to obejść JavaScriptem dodając do akcji „scroll” klasy do wersji mobilnej.
Jeżeli się na takie rozwiązanie zdecydujesz, to musisz najpierw znaleźć element, do którego będziesz dodawać odpowiednie klasy.
Taki kod powinien wyglądać mniej więcej tak:// Znajdź element po klasach
const headerElement = document.querySelector(‘.ast-primary-header-bar.ast-primary-header.main-header-bar.site-header-focus-item’);// Funkcja obsługująca scroll
function handleScroll() {
if (window.scrollY > 0) {
// Dodaj klasy po scrollu w dół
headerElement.classList.add(‘ast-sticky-active’, ‘ast-sticky-shrunk’, ‘ast-header-sticked’);
} else {
// Usuń klasy po scrollu w górę
headerElement.classList.remove(‘ast-sticky-active’, ‘ast-sticky-shrunk’, ‘ast-header-sticked’);
}
}// Nasłuchuj zdarzenie scroll
window.addEventListener(‘scroll’, handleScroll);Trzeba jednak to zweryfikować na żywym organizmie, czyli potestować. Możliwe, że trzeba będzie dopisać jeszcze trochę w css.
Pozdrawiam,
Paweł24/10/2023 o 12:35 #105589Dorota TrellaUczestniczkaHej,
Dzięki za wskazówki, jednak nie o to mi chodzi.:)
Na mobilach menu się nie przykleja, bo nie chcę, żeby się przyklejało – zajmuje za dużo miejsca i zasłania ekran. Jest przyklejone tylko na stronie przeglądanej na komputerze. Tak ma być. 🙂
To, z czym mam problem, jeśli chodzi o menu – tylko na kompie, bo na mobilach nie ma menu przyklejonego, więc nie ma też problemu – to to, co dzieje się na stronie “o mnie”. W sekcji “Moje podejście do menopauzy” w lewej kolumnie są grafiki zablokowane w obrębie komórki: menopauza, zmiana, wolność. Kiedy przewijasz ekran i grafika dociera do przyklejonego menu, wskakuje na nie, zamiast się pod nim chować.
Moim zdaniem Twoja pierwsza ekspertyza była słuszna, tyle, że ja nie umiem jej wprowadzić w życie.Z kolei na mobilach mam inny problem – tam w menu górnym, gdzie jest link do quizu, nad napisem wyświetla się biała linia i za diabła nie wiem, skąd się tam wzięła i jak się jej pozbyć.
24/10/2023 o 13:05 #105591Paweł ZielińskiModeratorkaZrób tak, przejdź do Kokpitu
Wygląd > Dostosuj > Dodatkowy CSSW oknie poniżej dodaj wpis
.ast-primary-header-bar.ast-primary-header.main-header-bar.site-header-focus-item{
z-index: 999 !important;
}Opublikuj i powinno być ok.
Jak by nie działało to sprubuj usuwać pojedynczo klasy np.: “.ast-primary-header-bar” kropka musi być przed nazwą klasy.24/10/2023 o 13:18 #105593Dorota TrellaUczestniczkaDodałam, nie zadziałało. Usuwałam pojedynczo klasy, najpierw od przodu, potem od tyłu i też nie zadziałało. Coś robię źle albo nie tu jest problem.
Co do motywu – mam płatną Astrę.24/10/2023 o 13:29 #105595Paweł ZielińskiModeratorkaMożesz jeszcze spróbować te klasy lub ich kombinacje
.ast-sticky-active
.ast-sticky-shrunk
.ast-header-sticked
.ast-main-header-wrap
.main-header-bar-wrap
możesz spróbować te same klasy z div
div.ast-sticky-active
div.ast-sticky-shrunk
div.ast-header-sticked
div.ast-main-header-wrap
div.main-header-bar-wrapGeneralnie trzeba znaleść albo znacznik i klasę albo id.
Czyli “zbadaj” tak jak jest pokazane na kursie.
Czasem trzeba użyć kombinacji klas.
Możesz też napisać zamiast 999 –> 9999
To tyle jak mogę pomóc tak naprawdę to trzeba sobie potestować.
Jak bym miał dostęp do wordpressa to bym było prościej.24/10/2023 o 15:16 #105599Dorota TrellaUczestniczkaPotestowałam.
Wypróbowałam wszystkie powyższe klasy. Przez zbadaj znalazłam coś takiego:
.ast-sticky-header-shrink .ast-primary-header-bar.ast-header-sticked, .ast-sticky-header-shrink .ast-primary-header-bar.ast-header-sticked .site-primary-header-wrap, .ast-header-sticked .ast-primary-header-bar .site-primary-header-wrap, .ast-sticky-header-shrink .ast-mobile-header-wrap .ast-primary-header-bar.ast-header-sticked, .ast-sticky-header-shrink .ast-mobile-header-wrap .ast-stick-primary-below-wrapper.ast-header-sticked .ast-below-header, .ast-sticky-header-shrink .ast-stick-primary-below-wrapper.ast-header-sticked .ast-primary-header-bar .site-primary-header-wrap {
min-height: 80px;
}Zamiast {
min-height: 80px;
}
wkleiłam
{
z-index: 999 !important;
}
i wersję z 9999, też nie zadziałało.Skrzydełka mi opadły. 🙁
24/10/2023 o 15:25 #105600Dorota TrellaUczestniczkaOkej, znalazłam. 😉
Zadziałało to:.site-header {
z-index: 999 !important;
}W takim razie, skoro odnieśliśmy taki sukces, to czy ktoś może jeszcze pomyśleć, skąd wziął się ten biały pasek nad górnym menu na mobilkach? Będę bardzo wdzięczna. 🙂
25/10/2023 o 01:58 #105612Kaja RzeczkowskaModeratorkaWymiatasz!
Pewnie że może pomyśleć 🙂
W klasie
.ast-header-break-point .main-header-menu
masz wprowadzone m.in:
background-color: #f9f9f9
border-top-width: 1px;I to jest ten Twój pasek 🙂 Jak w narzędziach developera odptaszkowałam linijkę z 1px to pasek zniknął.
25/10/2023 o 11:44 #105617Dorota TrellaUczestniczkaDziękuję! <3
Irytowało mnie to do łez. 🙂26/10/2023 o 21:59 #105655Katarzyna MasztallerModeratorkaSuper, że się udało rozwiązać problem!
- AutorWpisy
- UWAGA! Forum tylko dla studentek i studentów Interaktywnej Akademii WordPressa Musisz się zalogować by odpowiedzieć w tym temacie.