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 :

Aligner le logo et le menu dans Cassiopeia

Revoyons l'emplacement des positions de modules de l'en-tête de Cassiopeia pour voir quelles sont nos options :

Aligner le logo et le menu dans Cassiopeia

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.

Afficher un nouveau module dans Cassiopeia

Dans la liste des types de modules disponibles, cliquez sur personnalisé :

Afficher un nouveau module dans Cassiopeia

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 :

Aligner le logo et le menu dans Cassiopeia

Dans le menu latéral, cliquez maintenant sur Système puis sur Styles des templates du site dans la rubrique Templates :

Aligner le logo et le menu dans Cassiopeia

Ouvrez votre template (Cassiopeia, dans cet exemple) puis ouvrez l'onglet Avancé.

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 !

Aligner le logo et le menu dans Cassiopeia

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net