[Protostar] Seach a scomparsa

[sickseven]

Salve a tutti,

sto lavorando sul template Protostar e mi piacerebbe che nella versione mobile/tablet la barra di ricerca scomparisse per lasciare il posto ad una più discreta icona, esattamente come avviene nel Template JAElastica

Quindi ho modificato nel file index.php la porzione di codice:

Codice: [Seleziona]

<div class="header-search pull-left">
<jdoc:include type="modules" name="position-0" style="none" />
</div>



in questo modo:

Codice: [Seleziona]


    <div id="he-search" class="header-search pull-left" >
        <span class="icon-search"></span>
        <jdoc:include type="modules" name="position-0" style="none" />
    </div>
   
    <script type="text/javascript">
   
    // toggle search box active when click on search button
    $$('.search-btn').addEvent ('mouseenter', function () {
    // focus on search box
    $('mod-search-searchword').focus();
    });
    $('mod-search-searchword').addEvents ({
    'blur': function () {$('he-search').removeClass ('active');},
    'focus': function () {$('he-search').addClass ('active');}
    });
   
    </script>




e settato i vari stili ovviamente. Dciamo che funziona, ma a metà(grazie ai CSS) in quanto la classe active non viene aggiunta al tag <div id="he-search" class="header-search pull-left" > quindi la barra scompare non appena ci si posiziona con il mouse fuori dall'area.

Ho provato diverse variabili del noConflict, ma non cambia niente.

Qualcuno ha dei suggerimenti?

Grazie Mille,
bg

[map]

Ciao,


Se usi Bootstrap, prova a guardare qui http://getbootstrap.com/2.3.2/scaffolding.html#responsive