Suchfunktion im Header

Wie sieht denn dein Header aus? Also die ganzen Einstellungen deines Headers : logo left, menu right, sticky , transparent , shrinking or not etc. pp.

Wenn du also keine Link hast, dann wäre das mal ein Ansatz, wo man bessere Hilfe geben kann.
Oder ist der Link nicht ganz jugendfrei ? ;)

• This reply was modified 4 years, 3 months ago by Guenni007.

bei einem shrinking header muss ich nochmal in mich gehen. Damit das mitläuft beim verkleinern

habe versucht das umzustellen, aber wenn ich es hinbekomme das ich das relativ positionieren kann mit top: 50% und transformY(-50%) dann haut es beim öffnen der Suchvorschläge raus.

Einzige Möglichkeit, die top position an das shrinkscript koppeln.
Das ist ein wenig arbeit. Oder du verzichtest auf das ohnehin sehe dezente shrinken ( da du ja einen kleinen header gewählt hast )

hier ist mal das veränderter shrink script – ich erklär die nachher oder Morgen wie es geht.
https://pastebin.com/sKnhYq4a Download: Link

nach dem Download zurückbenennen in das original: avia-snippet-sticky-header.js

• This reply was modified 4 years, 3 months ago by Guenni007.

ich sehe du hast es auch ohne script geschaft – muss ich mir anschauen, gestern im schnellen drüber schauen sah ich keine Möglichkeit.
Schau dir aber auch bitte an, wo dein Ajax Suchergebnis Feld landet. Das liegt dann an der flex einstellung das beim Erscheinen der ergebnisse das alles nicht mehr stimmt.

Hier mal meine Lösung :

um ein child-theme shrinking script zu haben – platziere dieses hier in deiner Child-theme functions.php:

function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}
add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );

das hier ins quick css:
entferne die obigen Einträge dann wieder zuerst.

#top #searchform  {
  position: relative;
  height: 100%;
  width: 220px;
}

#top #avia-menu #searchform > div:first-child {
  opacity: 1 !important;
  display: block !important;
  max-width: 220px;
  border: 1px dotted #2d5c88;
  top: 22px
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.8);
  position: relative;
  top: 22px;
  border: 1px dotted #2d5c88;
}

#top .menu-item-search-dropdown > a, 
#searchform #searchsubmit, .av_ajax_search_image, .iconfont {
  font-size: 16px;
}

#top .av_minimal_header #s {
  padding: 8px 47px 8px 5px;
}

_______________________
nur zur Info – darf ignoriert werden
wenn du dir deinen Header anschaust, geht der von 88px auf 44px höhe zurück beim shrinken. Das ist normales Shrinkverhalten bei Enfold ( Hälfte )
ich habe mir jetzt die Position des Searchform divs angeschaut und rein empirisch ermittelt: für den Anfang wären ca. 22px top abstand ok – nachher sollten es nur noch 1px sein.
Diese Abnahme des Topabstandes muss ich mit der Variable koppeln, welch die header höhe repräsentiert ( in dem Script ist das newH ).
Mir war klar, dass ich es nur durch Faktoren nicht hinbringen würde – eine konstante musste noch dabei sein.

88x - y = 22
44x - y = 1

zwei Gleichungen zwei Unbekannte
Lösung: x ≈ 0.477 und y= 20

daher die neue Kalkulation innerhalb des scriptes:
search_form.css({'top': (0.477*newH) - 20 + 'px'});

ich hatte noch vor die search results unterhalb mit einzubinden, da die aber noch garnicht im DOM sind wenn die Seite lädt – kann eine ähnliche Berechnung nicht greifen.
– leider –

ich glaube ich vergaß zu erwähnen, dass diese Veränderte Script Datei dann in den Child-Theme unterordner js muss.
ist halt die normale Baumstruktur wie im Elternthema – ( ist nicht zwingend nötig, macht aber Sinn das beizubehalten. )
Siehst du ja auch oben in dem Snippet wo das veränderte script zunächst im Elternthema deregistriert wird , und dann das Child Script geladen wird.