it-swarm.com.de

Es fällt Ihnen schwer, das Suchsymbol auf Tablets anzuzeigen

Ich habe ein ganz bestimmtes Problem und kann einfach nicht herausfinden, was los ist.

Ich habe ein Fontawesome-Suchsymbol, das beim Klicken eine VM - Suche in einer Dropdown-Liste öffnet. Dies funktioniert auf den meisten mobilen Bildschirmgrößen und Desktops einwandfrei. Wenn Sie jedoch beispielsweise Chrome Dev-Tools verwenden und das iPhone X im Querformat auswählen, wird das Symbol nicht angezeigt. Ich habe durch die Klassen geklickt und kann keine Anzeige sehen: Keine auf dieser Bildschirmgröße, daher bin ich völlig ratlos, warum sie nicht angezeigt wird.

Der zugehörige Code lautet:

<div class="serchline">
<form action="/all-products/results,1-24?search=true" method="get">
<div class="searchsearch">
<input style="vertical-align :middle;" name="keyword" id="mod_virtuemart_search" maxlength="100" alt="Search" class="inputboxsearch ac_vm ac_input" type="text" size="100" value="Type text and hit enter" onblur="if(this.value=='') this.value='Type text and hit enter';" onfocus="if(this.value=='Type text and hit enter') this.value='';" autocomplete="off"></div>
<input type="hidden" name="limitstart" value="0">
<input type="hidden" name="option" value="com_virtuemart">
<input type="hidden" name="view" value="category">
</form>
<div class="ac_result" style="display:none;"></div>
<div class="sropen"><i class="fa fa-search"></i></div>
<div class="srclose"><i class="fa fa-times"></i></div>
</div>

Ich habe die Site derzeit in den Dev-Modus versetzt, da ich dies beheben möchte. Um die Site anzuzeigen, müssen Sie auf hier klicken

Ich hatte gehofft, dass jemand helfen kann, da ich mir schon seit einiger Zeit den Kopf zerbrochen habe.

UPDATE: Das Symbol scheint zu verschwinden, wenn die Breite 768px überschreitet. Ich suche also immer noch nach einer Medienabfrage, die sich darauf beziehen könnte.

1
Dtorr1981

Ok, nach etwas tieferem Graben wurde das Problem durch Folgendes behoben:

@media (min-width:768px) and (max-width:991px) {    
#t3-mainnav .t3-navbar.navbar-collapse.collapse { 
        display:block; 
        height:0px; 
        border:none; 
        background:none; 
        box-shadow:none; 
        position:static;
    }
    .t3-megamenu {
        display:none;
    }
}

Das Problem war anscheinend auf einige vom Vorlagenentwickler erstellte Vorlagenanpassungen zurückzuführen, die beim Ändern der Reaktionseinstellungen die Anzeige des Suchsymbols verhinderten.

Vielen Dank für Ihre Kommentare. :) :)

2
Dtorr1981

Die Suchfunktion befindet sich in der Navigationsleiste, die auf schmaleren Bildschirmbreiten ausgeblendet ist.

Der relevante HTML-Code lautet:

<div class="t3-navbar navbar-collapse collapse">

und das entsprechende CSS ist:

.collapse {
  display: none;
}

Die einfachste Lösung besteht wahrscheinlich darin, ein zusätzliches Suchmodul an einer alternativen Modulposition für engere Bildschirmbreiten hinzuzufügen.

2
Neil Robertson