Prestashop : déplacer la barre de recherche dans la barre de navigation

Sur le template par défaut, la zone de recherche est placé entre le logo et le blog panier. Certains modules permettent d’afficher une icône dans le menu principal pour rediriger vers l’accueil, ce qui rend le logo plus ou moins inutile. Pour gagner de la place, l’idée est donc de bouger le champ de recherche rapide dans la barre de navigation :

Le bloc de recherche rapide n’a pas de paramétrage. Il faut donc passer par le menu Modules > Positions pour le déplacer. Voici sa configuration de base :

Supprimez le module du hook displayTop, et ajoutez le dans le hook displayNav :

Seulement ce n’est pas si simple. Vous remarquez que malgré le fait que Prestashop permette de mettre ce module à cet endroit, il n’a pas prévu le style qui va avec. Si vous avez le thème par défaut, ouvrez le fichier prestashop/themes/default-bootstrap/css/modules/blocksearch/blocksearch.css (si ce n’est pas le thème par défaut, vous pouvez toujours modifier le style du module original, dans prestashop/modules/blocksearch/blocksearch.css. Puis collez ce code à la fin du fichier :

/*champ de recherche dans la nav*/
.nav #search_block_top {
    padding-top: 4px;
    padding-left: 30px;
}

.nav #search_block_top #search_query_top {
    padding: 10px 60px 7px 13px;
    height: 30px;
}

.nav #search_block_top .btn.button-search {
    width: 40px;
    padding: 3px 0 4px 0;
}

@media (max-width: 768px) {
    .nav #search_block_top {
        display: none;
    }
}

Pour la route, voici un second style qui passe un peu mieux pour la barre de navigation :

/*champ de recherche dans la nav*/
.nav #search_block_top {
    padding-top: 5px;
    padding-left: 30px;
}

.nav #search_block_top #search_query_top {
    padding: 6px 60px 7px 13px;
    height: 28px;
    background-color: #3E3D3D;
    border: 0;
    -webkit-box-shadow: 0 0 3px 1px #232222;
    box-shadow: 0 0 3px 1px #232222;
}

.nav #search_block_top .btn.button-search {
    width: 40px;
    padding: 2px 0 2px 0;
}

@media (max-width: 768px) {
    .nav #search_block_top {
        display: none;
    }
}

Pour centrer la barre de recherche au milieu de la barre de navigation :

/*champ de recherche dans la nav*/
.nav #search_block_top {
    padding-top: 5px;
    margin: 0 auto;
    float: none;
}

.nav #search_block_top #search_query_top {
    padding: 6px 60px 7px 13px;
    height: 28px;
    background-color: #3E3D3D;
    border: 0;
    -webkit-box-shadow: 0 0 3px 1px #232222;
    box-shadow: 0 0 3px 1px #232222;
}

.nav #search_block_top .btn.button-search {
    width: 40px;
    padding: 2px 0 2px 0;
}

@media (max-width: 768px) {
    .nav #search_block_top {
        display: none;
    }
}

Voila le résultat :