Thumbnail menu down

Descendre le menu sur mobile sous la navigation

Lorsque le menu s'ouvre horizontalement sur mobile, il passe par dessus la barre de navigation. Voici l'astuce pour qu'il soit juste en dessous !

Exemple menu horizontal en haut
Exemple menu horizontal en bas

Horizontal seulement

Avec le thème Smart (mobile first) d'e-monsite on peut choisir dans les paramètres l'orientation d'ouverture du menu sur mobile :

  • verticalement (comme les anciens thèmes)
  • horizontalement (comme la plupart des applications d'aujourd'hui)

Nous allons voir comment faire passer ce menu juste en dessous de la barre principale en horizontale avec du CSS uniquement !

(Visitez notre page Ressources pour tester votre site sur mobile via votre navigateur ou suivez ce tutoriel e-monsite.)

Quelques précisions

Pour que ce trick fonctionne correctement, il faut que l'option "Fixer le menu horizontal" dans la personnalisation du thème soit cochée !

On préférera également l'option "Au dessus de l'entête" comme dans l'image ci-dessous.

Option menu fixe

Normale ou étendue ? Pas de problème !

Dans la personnalisation du thème, on peut choisir entre deux hauteurs de menu : normale ou étendue.

Si vous choisissez "normale", votre barre de navigation fera 50px de haut contre 80px en "étendue". Cependant, en version mobile, les deux font 50px ! (histoire de ne pas prendre trop de place sur mobile)

Une ligne de CSS

Le menu étant en position: fixed; pour réaliser l'animation, il nous suffit simplement de le descendre en CSS !

@media only screen and (max-width: 991px) {
    #navbar, #navbar-overlay {
        top: 50px; /*On descend le menu de la hauteur de la barre*/
    }
}

On ajoute quand même un @media histoire que ce soit propre et de suivre les points de rupture du thème.

Dans un soucis esthétique, on descend également l'ombre qui s'ajoute quand le menu s'ouvre.

Pour encore plus de personnalisation, on peut changer l'icon lorsque le menu est ouvert.

Pas si dur ?

Et voilà ! En 5 lignes de CSS on peut facilement personnaliser son menu horizontal sur mobile !

N'hésitez pas à nous envoyer vos sites ici avec le trick en action ou à nous poser vos questions !

responsive barre navigation blog article css

Commentaires

  • Birdy Créations
    Bonjour à tous.

    Je viens de rester ce code. Ca fonctionne parfaitement et le rendu est plus pro !
    Bravo emstrikcs !