Joomla 4 mettre un logo dans le haut avec un effet de dépassement

[wd_newbie]

Bonjour à tous,

J'essaie vainement de mettre en place le logo du site en haut à gauche sous la forme d'un rond contenant le logo , qui dépasserait un peut le "menu", un peu comme sur cet exemple ci-dessous

une idée pour le faire, je suppose avec un module personnalisé et une png dedans, mais comment faire pour avoir cet effet de "dépassement" sur le bas.4

Si on laisse la couleur du menu sur toute la hauteur c'est vraiment moche .... je me bat avec ça ...et c'est J4 qui gagne pour l'instant

Une idée ?

[Helloo]

Bonjour,

Certainement avec du CSS, mais cela dépend aussi de quel template tu utilises.

Et pourquoi ne pas directement commencer avec Joomla 5 ?

[wd_newbie]

Je viens de faire la migration en J4 .... vu ce que ça m'a pris, j'hésite de me relancer dans l'aventure tout de suite

Jusque là, je suis d'accord avec toi, c'est juste après que je pêche

[Helloo]

J’ai testé sur Cassiopeia en insérant un « Logo » cercle de 250 x 250px en .png dans un module personnalisé, et en position « below-top »
avec les css suivants : (à toi de tester…) à mettre dans ton user.css

.container-below-top, .container-topbar {
  color: #fff;
  height: 60px;
}

.mod-menu.mod-list.nav {
  margin-left: 500px;
}

/*A partir d'ici pour mobile*/
/*ta class pour reduire l'image*/
@media screen and (min-width: 320px) and (max-width: 760px) {
.taclass {
  width: 50%;
}
/*pour réduire la hauteur*/
.grid-child.container-nav {
  height: 0px;
}
}​

[Fred2FR3]

Bonjour,
Cela fait longtemps que je n'ai pas fait de l’intégration, je reste donc humble sur mon intervention. Pas de PNG arrondi avec un editeur (sauf optimisation de poids, bien que...), de memoire, c'est border-radius qui va arrondir l'image + un border solid pour le contour de couleur. Pour la superposition, c'est z-index.
Je vous donne quelque elements de réponse qui peuvent vous donner une piste a explorer sans etre certain que ce soit la solution ultime !

[wd_newbie]

Hello,

J'ai mis un module avec une image en png avec le css de Hello, ce module, je l'ai mis dans le "topbar" pour qu'il soit automatiquement aligné tout à gauche.

Le résultat est encourageant.

il faut que je potasse un peu le css pour l'affichage en mode mobile, mais c'est une bonne base

merci pour le coup de main !