Tout savoir sur WordPress

Cacher l’admin bar sur tablettes et mobile

Dans cet article je vous donne une petite astuce pour cacher l’admin bar WordPress sur mobile et tablette.

 

La plupart des articles vous montreront comment la cacher complètement. Cette solution est simple à mettre en oeuvre puisqu’il suffit de désactiver l’option depuis l’admin WordPress > Utilisateurs > Votre Profil  et décocher Afficher la barre d’outils lorsque vous visitez le site.

Pour ma part je souhaite simplement la cacher sur des tailles d’écran trop petites, car la barre passe alors sur deux lignes, et c’est génant quand vous faites vos tests de responsive. Les fonctions offertes par cette barre sont plutôt utiles, et j’utilise des plugins qui ajoutent des informations utiles dans cette barre (notamment jetpack et mon plugin WP Simple Debug).

Nous allons donc simplement cacher la barre en CSS en utilisant une media query CSS3 :


@media screen and (max-width: 768px) {

html[lang=fr-FR] {
 margin-top: 0 !important;
 }
 #wpadminbar {
 display:none;
 }

}

Le problème est que WordPress ajoute une marge de 28px qui reste car elle est appliquée directement dans le CSS et en !important. Le seul moyen de supplanter cette règle est d’aller un cran plus précis, c’est pour cela que je cible html[lang=fr-FR].

Cette technique vous permet donc de cacher cette barre sur des résolutions inférieures à 768px. Mais vous pouvez régler ça comme vous le souhaitez.

Cet article a été mis à jour il y a 4047 jours - Il n'est peut être plus à jour !

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 36 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Co-fondateur de WPChef, la formation WordPress pour les débutants. Vous pouvez me rencontrer lors d’événements tels que les WordCamp. Traducteur Français de l’extension Advanced Custom Fields. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

2 Commentaires

  1. Salut Maxime
    Je découvre ton blog aujourd’hui. Tu es désormais dans mes flux :-)
    Merci pour ce truc qui va m’éviter de systématiquement désactiver la barre d’admin pour justement tester le responsive. Et pourtant elle est très pratique.
    À bientôt

    • Merci pour ton message ! En effet j’avais le même problème c’est pour ça que j’ai réfléchi à une façon de la conserver sans qu’elle pose problème.