Button scondary-toggle

ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

Hallo,

ich habe ein kleines Problem mit dem „Hamburger“-Button, der ja im Kopf der Seite erscheint, wenn man das Browserfenster eng zusammenschiebt, also etwa auf Smartphonegröße. Dieser Button soll ja bei Klick das Menü einblenden, das durch die Verkleinerung verschwindet, und genau das tut er leider nicht. Im Quelltext habe ich das hier gefunden: <button class=“secondary-toggle“>Menü und Widgets</button>
und denke eigentlich, dass dieser Eintrag korrekt ist. Dennoch funzt das nicht. Wer kann helfen?
Zu überprüfen auf fahrrad-history.de

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)

Moderator Bego Mario Garde
(@pixolin)

vor 7 Jahren, 5 Monaten

„… habe ich das hier gefunden: <button class=“secondary-toggle“>Menü und Widgets</button> und denke eigentlich, dass dieser Eintrag korrekt ist. „

Der Button wird ja auch angezeigt, aber scheinbar wird das Script nicht geladen, dass den Button auch mit einer Funktion versieht. Hast du am Theme Änderungen vorgenommen? Hast du zur Eingrenzung möglicher Fehlerquellen mal die Plugins deaktiviert und den Debug-Modus aktiviert?
Flower33
(@flower33)

vor 7 Jahren, 5 Monaten
Bego schrieb:

Hast du am Theme Änderungen vorgenommen?

Genau, ist auch meine Vermutung. JavaScript setzt valides HTML voraus, und ich hatte ihn schon vor 1 Monat in dem anderen Thread darauf hingewiesen, dass auf seiner Website sowohl body– als auch html-tags nicht geschlossen werden. Die footer.php wurde aber weder korrigiert noch kommentiert. 🙂
- Diese Antwort wurde geändert vor 7 Jahren, 5 Monaten von Flower33.
Flower33
(@flower33)

vor 7 Jahren, 5 Monaten
Ansonsten noch einmal die Frage, die Bego schon in dem oben genannten Thread gestellt hatte und die dort auch nicht konkret beantwortet wurde: Hast du für dieses „main-menu“ unter Design > Menüs > Menü-Einstellungen auch die Position „Primäres Menü“ gewählt?
- Diese Antwort wurde geändert vor 7 Jahren, 5 Monaten von Flower33.
Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

Danke für den Hinweis, aha, das Script lädt nicht. Kann man das „nachrüsten?“-
Ich habe ein paar Änderungen im Theme vorgenommen, aber nur die Optionen von Design-> Anpassen verwendet. Dann habe ich kürzlich die Seitenleiste im CSS fixiert. Der Button-Bug war aber schon vorher. – PlugIns hab ich keine aktivierten. Debug-Modus kenne ich nicht. Wo finde ich den?

Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

Ja, in der Tat, ich habe in der footer.php rumgedoktert. Soll man das lieber lassen? Ich wollte natürlich nur den Text ändern: Proudly presented bei WP. Oder darf man das etwa nicht?
Ich hab den älteren thread noch mal gelesen. Danke, das ist ja ein guter Tip, ne neue footer.php hochzuladen. Wedrd ich versuchen.

Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

@ flower33: Ich habe eine frische footer.php hochgeladen, und es klappt! Herzlichen Dank für den Tipp. Problem gelöst.
Flower33
(@flower33)

vor 7 Jahren, 5 Monaten
Prima!

Schau später oder morgen nochmal hier rein, ich wollte dir noch eine kleine Anmerkung schreiben, komme aber grade nicht dazu.
- Diese Antwort wurde geändert vor 7 Jahren, 5 Monaten von Flower33. Grund: Nachtrag
Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

Gern. Habe in der footer.php NUR „Proudly presented“ rausgenommen. WordPress steht da noch mit Link, der noch nichtmal ein neues Fenster öffnet. Das kann man sicher auch ändern, oder?
Flower33
(@flower33)

vor 7 Jahren, 5 Monaten
Ja, in der Tat, ich habe in der footer.php rumgedoktert. Soll man das lieber lassen?

Ja. In den Template-Dateien (z.B. der footer.php) und der functions.php deines Themes (dem sog. Parent-Theme) solltest du auf keinen Fall Änderungen vornehmen. Erstens sind deine Änderungen nach dem nächsten Theme-Update wieder futsch, weil sie von den Update-Dateien überschrieben werden, und zweitens ist die Gefahr sehr groß, dass dann genau das passiert, was du gerade erlebt hast: Du änderst etwas an der falschen Stelle oder entfernst versehentlich Code, und schon klappt irgendwas an deiner Website nicht mehr.

Verhindern kannst du das durch Anlegen eines Child-Themes, in dem du sowohl die CSS-Änderungen vornehmen kannst als auch Änderungen einzelner Templates. Ich habe neulich mal eine detaillierte Anleitung geschrieben, wie man ein Child-Theme erstellt. Außerdem gibts im Netz zahlreiche Tutorials. Nur kein altes nutzen, weil sich die Methode inzwischen geändert hat.

In deinem speziellen Fall hast du dann z.B. zwei Möglichkeiten, die Footer-Credits deines Themes zu ändern:

(1)
Du kannst einfach die footer.php des Parent-Themes in den Child-Theme-Ordner kopieren und dann an dieser footer.php die gewünschten Änderungen vornehmen.
Oder

(2)
Du änderst nicht die footer.php im Child-Theme, sondern benutzt den speziellen Action-Hook des Parent-Themes Twenty Fifteen für die functions.php deines Child-Themes, so wie in diesem Video erklärt.

Noch eine kleine Anmerkung:
Ich weiß nicht, welche Maße dein Bildschirm hat, aber auf einem Notebook mit der Auflösung 1600:900 (und kleineren Viewports) ist der Impressums-Link in deiner Sidebar nicht mehr zu sehen, seitdem du die Sidebar-Position auf „fixed“ gesetzt hast.
Ich würde das entweder wieder auf „relative“ setzen oder die Abstände nach oben verringern, so dass der Link wieder sichtbar wird.

Und zum Abschluss:

Link, der noch nichtmal ein neues Fenster öffnet. Das kann man sicher auch ändern, oder?

Bei der Link-Setzung das Häkchen setzen bei „Link in neuem Fenster öffnen“, was dir sicher schon bekannt ist. Vgl. das „target=_blank“ im folgenden Beispiel-Code:
```
<a href="https://de.wordpress.org/support/" target="_blank">WordPress-Support</a>
```
Das solls aber gewesen sein, ist eh schon wieder viel zu lang geworden. Schönes Wochenende! 🙂
Flower33
(@flower33)

vor 7 Jahren, 5 Monaten
```
target="_blank"
```
Das ist die korrekte Notation, wie sie auch im tatsächlichen Beispiel-Code oben zu sehen ist. Im Fließtext davor hatte ich beim schnellen Tippen ein doppeltes Anführungszeichen nach dem Gleichheitszeichen verschludert.
Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten
Ok, das soll’s gewesen sein. Danke nochmals, das waren ja sehr profunde Hinweise. Das target-tag ist mir netürlich bekannt. Kann ich doch auch in den Code der footer.php innerhalb des Links einsetzen, oder? Ich werd’s ausprobieren. Ebenfalls: schönes Wochenende!

Ich würde das entweder wieder auf „relative“ setzen oder die Abstände nach oben verringern, so dass der Link wieder sichtbar wird.

Da weiß ich leider nicht, wie man das macht: die Abstände verringern. Würde ich aber gern wissen.
- Diese Antwort wurde geändert vor 7 Jahren, 5 Monaten von ugehner.
Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

@ flower33: Ja, das Child-Theme, davon hab ich auch gehört, und will mich gern damit noch mal eingehend beschäftigen. Zunächst aber verschwinden tatsächlich bei geringerer Bildschirmauflösung als 1920 x 1080 bei der fixierten Sidebar die untersten Menüeinträge, deswegen hab ich die jetzt wieder auf „relative“ gesetzt. Schöner wäre aber, und vom Kunden so gewünscht, wenn sie fixiert ist, und damit keine Einträge verschwinden, müsste man, wie du auch virgeschlagen hast, die Abstände der Zeilen und zum Logo, gerne auch den Rand nach oben verringern. Kannst du mir noch verraten, wie das genau geht?
Moderator Bego Mario Garde
(@pixolin)

vor 7 Jahren, 5 Monaten
Kleine Anmerkung: target="_blank" sollte nach Möglichkeit vermieden werden. Eine lesenswerte Begründung findest du hier: https://css-tricks.com/use-target_blank/. Wenn du trotzdem das Attribut verwenden möchtest, solltest du wegen Barrierefreiheit zumindest darauf hinweisen, dass der Inhalt in einem neuen Tab/Fenster geöffnet wird. (vgl. https://www.w3.org/TR/WCAG20-TECHS/H83.html)
- Diese Antwort wurde geändert vor 7 Jahren, 5 Monaten von Bego Mario Garde. Grund: Nachtrag
Thread-Starter ugehner
(@ugehner)

vor 7 Jahren, 5 Monaten

Das handhabe ich in der Regel anders: wann immer ein Link zu einer externen Seite führt, verwende ich target=“_blank“. Diese Begründungen bei CSS-Tricks, na ja, richtig überzeugend sind die nicht. Kann man drüber streiten, aber mir wär’s lieber, User würden sich nicht verirren und sich fragen müssen, wo ist denn jetzt die Seite, auf der ich war? Klar, es gibt den Rückwärts-Button, Verlauf u.v.m. Ich möchte es den Leuten so einfach wie möglich machen.

Flower33
(@flower33)

vor 7 Jahren, 5 Monaten

Bezüglich target="_blank" teile ich die Meinung von Bego, da mir persönlich das Thema Zugänglichkeit bzw. Barrierefreiheit auch sehr wichtig ist. Ich hatte target="_blank" oben genannt, weil es ja von WordPress bei der Link-Setzung durch Anklicken des Kästchens „Link in neuem Fenster öffnen“ so verwendet wird und ich hier keinen Roman zur Problematisierung schreiben wollte, verwende es selbst aus den genannten Accessibility-Gründen aber nicht.

Meine eigene Linkklickpraxis sieht so aus, dass ich bei augenscheinlich externen Links sowieso immer gleichzeitig die STRG-Taste drücke, um das Öffnen in einem neuen Tab zu erzwingen.

Bei meiner im Entstehen begriffenen neuen WP-Website werde ich es wohl so machen: Für sehende User gibts vor externen Links ein Hintergrund-Icon (das bekannte kleine Kästchen, aus dem ein Pfeil in nordöstlicher Richtung hinausweist und den Wechsel zu einer externen Website ankündigt), für sehbehinderte User füge ich dem Linkcode hinzu: title="Link zu externer Website".

die Abstände der Zeilen und zum Logo, gerne auch den Rand nach oben verringern. Kannst du mir noch verraten, wie das genau geht?

Ich würde es auf „relative“ lassen. Bei eingeschaltetem JavaScript bleibt die Navigation ja sowieso ständig im Blick und ist gleichzeitig durchgehend zugänglich. Bei „fixed“ entsteht ohne größeren Aufwand zur Vermeidung (würde in diesem Rahmen zu weit führen) u.a. das genannte Problem mit dem nicht mehr sichtbaren Impressumslink. Die Abhilfe durch geänderte Abstände würde sich ja immer nur auf einen bestimmten kleineren Viewport beziehen und beim nächst kleineren schon wieder unwirksam werden. Deshalb würde ich an deiner Stelle und beim aktuellen Kenntnisstand die Einstellung „relative“ empfehlen.

Nachfolgend trotzdem mal ein paar Links zu deiner Frage, wie man Abstände per CSS verändern kann:

Gib mal bei Google ein
css padding margin w3schools
und teste in den entsprechenden Artikeln den „Try it Yourself“-Button.
Sehr anschaulich zum Ausprobieren.

CSS-Einführungen
mediaevent.de/css/
htmldog.com/
developer.mozilla.org/de/docs/Web/CSS
Ich schreibe die Links mal so, damit der Beitrag wegen der Linkhäufung hoffentlich nicht im Spa*-Filter landet. 🙂

Noch einen schönen Sonntagabend!