Header und Footer Probleme mit Elementor

1 Christoph

Zu erst mal ein Hallo in die Runde da ich neu hier bin :) Ich hoffe ihr könnt mir weiterhelfen bei meinem Problem und ich kann auch etwas in der Community beitragen :)

Zum Problem im Header:
Das Größte Problem ist hier in der Mobilen Ansicht wenn ich schnell nach unten Scrolle verschwindet sehr oft mein Header was Problematisch ist da ich dann kein Nav. Menü mehr habe. bzw ganz selten Verschiebt sich der Header auf meiner Webdesign Landingpage um 20px nach rechts aber das ist sehr sporatisch. Könnt ihr hier vl ein Großes Problem erkennen ?

Beim Footer ist das Problem in der Desktop Ansciht wenn man z.b. wie auf der Webdesign Landingpage ist und denn Button Contact US hoovert das die Icons aus dem nichts Heller aufleuchten als normal. Woran kann das liegen ? ich werde nicht schlau daraus....

Ich bedanke mich schon mal für die Antworten :)

2 Jörg Kruse

Zum Problem im Header:
Das Größte Problem ist hier in der Mobilen Ansicht wenn ich schnell nach unten Scrolle verschwindet sehr oft mein Header was Problematisch ist da ich dann kein Nav. Menü mehr habe. bzw ganz selten Verschiebt sich der Header auf meiner Webdesign Landingpage um 20px nach rechts aber das ist sehr sporatisch. Könnt ihr hier vl ein Großes Problem erkennen ?

Im Inspector von Firefox kann man sehen, dass am Header ein EventListener hängt, der die JavaScript-Funktion stickyScroll() ausführt, welche diesen neu vermisst und postioniert. Wenn man im Firefox Inspector die Größe des Fensters ändert, sieht man, dass diese Anpassung bei schnellen Änderungen nicht ordentlich funktioniert.

Ich würde mal im Github Account von Elementor schauen, ob dieses Problem dort vielleicht bereits aufgeführt ist. Mit dem Suchbegriff "sticky" findet sich da ja einiges:

https://github.com/search?q=repo%3Aelementor%2Felementor%20sticky&type=issues

Beim Footer ist das Problem in der Desktop Ansciht wenn man z.b. wie auf der Webdesign Landingpage ist und denn Button Contact US hoovert das die Icons aus dem nichts Heller aufleuchten als normal

Welche Icons meinst du - ich konnte dort auf Anhieb keinen Effekt sehen? und in welchem Browser tritt das Problem auf?

3 Christoph

Du bist ein Wahnsinn ! Danke Danke Danke für die schnelle Antwort ! unter dem Plugin ElementsKit gibt es so funktionen DE Sticky, DE Caraousel etc. Die aber den Kompletten Page Speed Zerstöre.... Hab mir ganz am beginn wie ich die Seite gebaut habe noch gedacht der Sticky effekt ist das gleiche wie Fixed und habe es vergessen raus zu nehmen....Danke funktioniert jetzt viel besser und noch dazu sind meine Page Speed Insights gestiegen :)

Auch guter Tip mit Browser da ich wegen erweiterungen nur Chrome verwende ist es mir nicht aufgefallen das es nur bei chrome komischerweiße ist.

Wenn du z.b. auf diese Landingpage https://footec.at/seo-graz-steiermark/ gehst ganz noch unten habe ich vor dem Footer einen Contact Us Button sobald du diesen hooverst leuchten in Chrome die Icons unter Get In Touch im Footer auf das meine ich. Was kann das sein wenn es nur in Chrome ist ?

4 Jörg Kruse

Mit Chrome 122 unter Linux kann ich dieses Verhalten leider nicht nachvollziehen. Die Farbe der Icons ändert sich nicht, während ich über dem Button "Contact Us" hover.

Den Entwickler-Tools von Chrome zufolge ist für die Farbe der Icons wohl dieser Code-Abschnitt verantwortlich:

.elementor-116 .elementor-element.elementor-element-20480568 .ekit-header-info>li>a i {
    color: var(--e-global-color-accent);
    font-size: 18px;
}

... und zwar in dieser Autoptimize-Cache-Datei:

https://footec.at/wp-content/cache/autoptimize/css/autoptimize_single_d02437d4437afb214e6776a6e146c177.css?ver=1709737535

Liegt hier vielleicht auch ein Cache-Problem vor, wenn wir unterschiedliches sehen?

An irgendeiner anderen Stelle wird --e-global-color-accent als Farbe definiert. Aber das sollte ja nicht in Abhängigkeit von einem Hover-Effekt über einem anderen Element geschehen.

nach oben

Header und Footer Probleme mit Elementor

Beitrag schreiben (als Gast)