Positionnement du menu au dessus d'une image de fond

[wd_newbie]

Bonjour à tous,

Je me prends la tête a essayer de mettre un menu sous cette forme (voir plus bas) avec Cassiopeia :

Une image de fond en haut de la page, avec une position de menu dans le haut à droite.



Je galère pour positionner le menu, j'ai même tenté avec un nouvelle position top-menu et un positionnement en absolute, mais je n'arrive pas a avoir un positionnement relatif a mon "banner" vu que l'une des div n'est pas inclue dans l'autre ... ça part dans tous les sens.

Une idée pour le faire sous Cassiopeia simplement ... ?

[elchecmoi]

Bonjour, est-ce que ce lien pourrait aider ?

https://magazine.joomla.org/all-issues/august-2024/how-to-create-a-full-screen-photograph-home-page

[lomart]

Bonjour,

Une piste. Utiliser un module perso dans lequel on insère l'image de fond et le menu par un loadmodule. Ensuite, il reste à gérer le positionnement en CSS pour les différentes tailles d'écran.

[lefabdu51]

bonjour, il faut un template enfant sous cassiopea et modifier le fichier index.php du template. comme cela, tu pourras mettre ta div menu à l'interieur de la div banner.

<?php if ($this->countModules('menu', true) || $this->countModules('search', true)) : ?>
<div class="grid-child container-nav">
<?php if ($this->countModules('menu', true)) : ?>
<jdoc:include type="modules" name="menu" style="none" />
<?php endif; ?>
</div>
<?php endif; ?>​

Ce code est le code associé a ton menu (ligne 172 à 181).

<?php if ($this->countModules('banner', true)) : ?>
<div class="container-banner full-width">
<jdoc:include type="modules" name="banner" style="none" />
</div>
<?php endif; ?>​

Ce code est associée la position de la banniere.(ligne 187 à 191)
Pour inclure la div menu dans la div banner
tu déplace le code dans la div , ce qui te donneras le code suivant

<?php if ($this->countModules('banner', true)) : ?>
<div class="container-banner full-width">
<jdoc:include type="modules" name="banner" style="none" />
<?php if ($this->countModules('menu', true) || $this->countModules('search', true)) : ?>
<div class="grid-child container-nav">
<?php if ($this->countModules('menu', true)) : ?>
<jdoc:include type="modules" name="menu" style="none" />
<?php endif; ?>
</div>
<?php endif; ?>​
<?php endif; ?>
</div>
<?php endif; ?>​​

[wd_newbie]

Hello,

Merci pour toutes ces pistes, en attendant j'ai mis le module sur un style "standard", mais le look de base doit intégrer ce type de bouton, je vais le tester en loca.

Merci beaucoup pour le coup de main !

@ elchecmoi : je vais garder le lien sous la main, le look est sympa et peux servir, merci !