Bonjour à tous,
Je suis débutant et j’essaye tant bien que mal d’ améliorer mon site en récupérant des bribes de codes par ci par là. Dans le but d’améliorer mon menu principal, j’ai ajouté du code à la fin de BASE.CSS en suivant un super tuto anglophone.
Tout est parfait, SAUF un point très dérangeant : sur ordinateur le menu est nickel mais sur mobile le “hamburger se retrouve avec des éléments décalés”, la mise en page a clairement sautée.
Voici le code que j’ai rajouté en fin de base CSS je met en rouge la ligne que j’ai identifiée comme posant problème : si je la laisse mon menu sur ordinateur est bon mais ça fait sauter la mise en page de mon menu déroulant “hamburger” sur mobile. Si je la supprime, mon menu sur mobile est bon, mais le premier élément textuel de mon menu sur ordinateur se décale et se colle à la rubrique d’à coté.
/* Custom Header Styles */
.header__menu-item {
font-size: 3rem;
color: var(–gradient-base-accent-2);
}
/* Styles pour les éléments du menu déroulant */
.header__submenu .header__menu-item {
font-size: 1.6rem; /* Taille de police réduite pour le menu déroulant */
/* Ajoute d’autres styles spécifiques au menu déroulant si nécessaire */
}
.header__active-menu-item, .header__menu-item:hover, .header__menu-item:focus {
color: var(–gradient-base-accent-2);
}
/* Animation */
.header__active-menu-item, .header__menu-item span, .header__menu-item:hover span, details[open] > .header__menu-item {
text-decoration: none;
}
.header__menu-item {
padding: 0;
}
.header__menu-item span {
transition: none;
}
summary.header__menu-item:before {
left: 0;
right: 1rem;
}
.header__submenu summary.header__menu-item:before {
left: 1rem;
}
.list-menu li > a {
position: relative;
padding: 0 1.2rem;
}
.header__menu-item:before {
content: ‘’;
display: block;
position: absolute;
bottom: -2px;
left: 1.2rem;
right: 1.2rem;
height: 1px;
background: rgb(var(–color-foreground)); /* Should be the same color as the menu */
transform-origin: right bottom;
transform: scaleX(0);
transition: transform 0.7s ease 0s;
}
.header__menu-item:hover:before {
transform-origin: left bottom;
transform: scaleX(1);
background: rgb(var(–color-foreground)); /* Should be the same color as the menu */
}
component-mega-menu.css
/* Custom Mega Menu Styles */
.mega-menu__link, .mega-menu__link–level-2 {
font-size: 1.5rem;
color: var(–gradient-base-accent-2);
}
.mega-menu__link:hover, .mega-menu__link:active {
color: var(–gradient-base-accent-2);
}
.mega-menu__link–level-2 {
font-weight: bold;
}
/* Animation */
.mega-menu__link:hover, .mega-menu__link:hover, .mega-menu__link–active {
text-decoration: none;
}
.mega-menu__link:before {
content: ‘’;
display: block;
position: absolute;
bottom: -2px;
left: 1.2rem;
right: 1.2rem;
height: 1px;
background: rgb(var(–color-foreground)); /* Should be the same color as the menu */
transform-origin: right bottom;
transform: scaleX(0);
transition: transform 0.5s ease 0s;
}
.mega-menu__link:hover:before {
transform-origin: left bottom;
transform: scaleX(1);
background: rgb(var(–color-foreground)); /* Should be the same color as the menu */
}
component-menu-drawer.css
/* Custom Menu Drawer Styles*/
.menu-drawer__menu-item,
.menu-drawer__close-button,
.menu-drawer__menu-item–active,
.menu-drawer__menu-item:focus,
.menu-drawer__close-button:focus,
.menu-drawer__menu-item:hover,
.menu-drawer__close-button:hover {
color: var(–gradient-base-accent-2);
}
component-list-menu.css
/* Custom List Menu Styles */
.list-menu__item–active {
text-decoration: none;
}
/* Supprime le soulignement initial des éléments de menu */
.header__menu-item {
text-decoration: none;
}
/* Change la couleur au survol */
.header__menu-item:hover {
color: #000000; /* Remplace par la couleur souhaitée */
text-decoration: underline;
text-underline-offset: 0.3rem; /* Optionnel : ajuste l’espacement du soulignement */
}
/* Supprime le soulignement initial des éléments de menu */
.header__menu-item,
.header__menu-item:hover {
text-decoration: none !important;
}
/* Change la couleur au survol */
.header__menu-item:hover {
color: #000000; /* Remplace par la couleur souhaitée */
text-decoration: underline;
text-underline-offset: 0.3rem; /* Optionnel : ajuste l’espacement du soulignement */
}
/* Styles pour le menu hamburger */
.site-header__drawer {
display: none; /* Masque le menu hamburger par défaut */
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 280px; /* Largeur du menu déroulant, ajustez selon vos besoins */
background-color: #ffffff; /* Couleur de fond du menu déroulant */
z-index: 1000; /* Assure que le menu hamburger est au-dessus de tout le reste */
/* Autres styles */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour l’effet de profondeur */
padding: 20px;
}
/* Styles pour le bouton de fermeture du menu hamburger */
.site-header__drawer .close-button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 24px;
color: #333; /* Couleur du bouton de fermeture */
}
/* Styles pour les éléments de menu dans le menu hamburger */
.site-header__drawer .drawer__menu {
margin-top: 80px; /* Marge au-dessus du premier élément du menu */
}
.site-header__drawer .drawer__menu a {
display: block;
padding: 10px 0;
color: #333; /* Couleur du texte */
text-decoration: none;
transition: color 0.3s ease; /* Transition fluide pour la couleur du texte */
}
.site-header__drawer .drawer__menu a:hover {
color: #ff0000; /* Couleur du texte au survol */
}
/* Media query pour les écrans plus petits (mobile) */
@media screen and (max-width: 768px) {
.site-header__drawer {
width: 100%; /* Menu déroulant occupe toute la largeur de l’écran */
max-width: 300px; /* Largeur maximale du menu déroulant */
}
}
J’ai tout tenté en vain, si quelqu’un avait une idée pour que je puisse conserver ce CSS que je trouve top pour améliorer mon menu, et qui parvienne à régler le probleme ce serait génial.
Je vous remercie d’avance