Wie man eine Schaltfläche in den Kopfbereich hinzufügt

Hallo zusammen.

Ich habe die Codes hier in die erforderlichen Felder eingefügt, aber es hat nicht funktioniert. Wo mache ich einen Fehler?

Ich habe auch das Plugin ausprobiert, aber es beschädigt den Suchleistenbereich.

Hmmm, ja, ich vermute, Sie müssen etwas zusätzliche CSS-Arbeit leisten, damit die Header-Leiste mit Links funktioniert.

Frage: Entwickeln Sie auch für Mobilgeräte? Denn der Header auf Mobilgeräten hat viel weniger Platz, um Dinge hinzuzufügen. Sie möchten keine schöne Desktop-Website erstellen und dann feststellen, dass Ihre mobile Ansicht unordentlich ist.

Ich kann mich nicht sofort erinnern, aber es könnte dort auch einen Plugin-Outlet geben, den Sie verwenden können. :thinking:

Hallo Lilly.
Ich möchte das nur für den Desktop machen.
Die mobile Ansicht ist jetzt in Ordnung, ich möchte den Header-Bereich dort nicht verengen.

Wenn es übrigens nicht passiert, ist das keine große Sache. Dieser Button wird zu einer Forenkategorie weiterleiten.
Ich wollte nur, dass dieser Button für eine schöne Atmosphäre sorgt.

1 „Gefällt mir“

Meinen Sie zum Beispiel ein Symbol in diesem Bereich?

image

Können Sie genauer erläutern, was Sie suchen?

Hallo @Arkshine

wie Premium

Der Plugin-Outlet hier in diesem Bereich ist before-header-panel.

Dieser wird von den Komponenten Custom Header Links und Header Search verwendet.

Custom Header Links ist der richtige Weg!

Wie Lilly sagte, müssen Sie hier das CSS anpassen.
Soweit ich sehe, verwendet die Komponente Header Links etwas CSS im Outlet-Container, was erklären könnte, warum die Suche fehlschlägt.

Wenn es Ihnen nichts ausmacht, können Sie die Komponente wieder aktivieren, damit ich mir Ihr Forum direkt ansehen kann?

4 „Gefällt mir“

Hier wird es erklärt, aber wenn ich den notwendigen Code schreibe, funktioniert er nicht.

Ich habe es jetzt aktiviert, damit Sie nachsehen können, danke für Ihre Hilfe :pray:

Danke!

Versuchen Sie, dieses CSS hinzuzufügen:

.floating-search-input-wrapper .floating-search-input {
    margin: auto;
}

1 „Gefällt mir“

Wenn ich diesen Code verwende, sieht er für den anonymen Benutzer normal aus. Aber für den angemeldeten Benutzer sieht er nicht normal aus. Der Grund dafür sind die Codes, die ich verwendet habe, um die Suchleiste zu zentrieren.

Ich bin angemeldet und es wird wie erwartet angezeigt. Ich sehe die Suche zentriert. Sehen Sie meinen Screenshot. :thinking:

2 „Gefällt mir“

Es scheint ein wenig nach links verschoben zu sein.

2 „Gefällt mir“

Ja, er hat manuell margin-right: -35px; hinzugefügt, um das Header-Panel auszugleichen, und jetzt muss der Wert mit dem Link erneut angepasst werden.

2 „Gefällt mir“

Der Grund, warum ich das tue, ist, dass sich die Suchleiste für das eingeloggte Mitglied nicht nach links oder rechts bewegt. Die Suchleiste bleibt sowohl vor als auch nach dem Login an derselben Stelle.

Aber es scheint, dass es auch das Custom Header Links Plugin beeinträchtigt. Ich glaube, ich werde dort vorerst keinen Button platzieren. Wenn wir es mit CSS und HTML hinzufügen können, würde ich es gerne versuchen.

Vielen Dank für Ihre Zeit. :hugs:

1 „Gefällt mir“

Sie können die Suchleiste auch mit absoluter Positionierung aus dem Fluss nehmen.
Sie benötigen margin nicht mehr.

.floating-search-input-wrapper {
   position: absolute;
   left: 0;
   top: calc((4em - 2.6rem - 2px - 2px) / 2);  /* header height - search height - margin - border */
   width: 100%;
}

Möglicherweise müssen Sie eine Media Query hinzufügen, um die Breite bei niedrigeren Auflösungen zu steuern und sicherzustellen, dass sie sich nicht mit anderen Elementen überschneidet.

Vielen Dank, das ist großartig, ich werde es kontrollieren/überprüfen. :pray:

Aber wenn ich „Benutzerdefinierte Header-Links“ aktiviere, sieht der Header-Bereich nicht normal aus.

Das ist kein großes Problem. Ich wollte dem Header-Bereich nur etwas Visuelles hinzufügen.

Hallo @Arkshine Mir ist gerade aufgefallen. Nach diesem Code kann auf das Logo nicht geklickt werden.

Ich glaube, es hat mit dem position: absolute; Code zu tun.

Sie können dieses CSS hinzufügen, um das Logo über der Suche zu stapeln.

.home-logo-wrapper-outlet {
    z-index: 1;
}

Sie haben eine weitere Lösung für CSS floating-search-input, um Probleme mit den Seiten zu vermeiden (stellen Sie sicher, dass Sie CSS auf floating-search-input-wrapper entfernen):

.floating-search-input {
    position: absolute;
    left: 0;
    transform: translateX(calc(50vw - (33rem / 2)));
}

Vielen Dank, Arkshine :pray: