Par défaut, le logo et le menu sont affichés sur deux lignes différentes dans Cassiopeia. Si comme moi, vous préférez avoir votre logo affiché à gauche de la page et votre menu affiché à droite mais sur la même ligne, alors ce qui suit est fait pour vous. Dans ce tutoriel, nous allons voir comment aligner le logo et le menu dans Cassiopeia, le template par défaut de Joomla 4.
Pour l'instant, notre logo et notre menu sont donc affichés sur deux lignes :
Revoyons l'emplacement des positions de modules de l'en-tête de Cassiopeia pour voir quelles sont nos options :
Nous constatons que le menu est affiché sous le logo en position Menu et que le logo... n'a pas de position !
Si on affiche le menu en position Search, cela ne règle pas notre problème d'alignement et on prive les internautes d'une fonction recherche qui s'avère très souvent utile pour beaucoup.
Comment aligner le logo et le menu dans Cassiopeia ?
A partir du panneau d'administration, cliquez sur le symbole en face de Modules dans la rubrique Site.
Dans la liste des types de modules disponibles, cliquez sur personnalisé :
Indiquez un titre (Nouveau logo, par exemple) à ce nouveau module.
Masquez le titre avec le paramètre à droite de la page.
Sélectionnez Menu pour la position de module.
Dans l'onglet Assignation de menus, sélectionnez Sur toutes les pages.
Dans le menu de l'éditeur de texte (TinyMCE), ouvrez Outils puis cliquez sur Code source.
Dans la fenêtre modale qui s'est ouverte, collez le code suivant :
<div class="navbar-brand"><a class="brand-logo" href="/"> <span title="Titre à afficher au survol">Nom de mon site</span></a>
<div class="site-description small fst-italic pt-2">Tagline de mon site</div>
</div>Adaptez ce code selon vos besoins et cliquez sur le bouton Enregistrer pour refermer la fenêtre modale, puis cliquez sur le bouton Enregistrer & Fermer pour refermer le module.
Puisque nous sommes dans le gestionnaire des modules, flitrez vos modules pour n'afficher que ceux en position Menu et réorganisez-les comme ceci par glisser/déposer :
Dans le menu latéral, cliquez maintenant sur Système puis sur Styles des templates du site dans la rubrique Templates :
Ouvrez votre template (Cassiopeia, dans cet exemple) puis ouvrez l'onglet Avancé. Aligner le logo et le menu dans Cassiopeia
Sélectionnez Non pour le paramètre En-tête du site
Cliquez sur le bouton Enregistrer & Fermer
Affichez maintenant la page d'accueil de votre site pour constater que vous avez aligné le logo et le menu dans Cassiopeia !
