I am satisfied with the layout of the items in my desktop menu. Here is the CSS code I am using (help-07a.jpg):
/* Menu */
#menu-language{
border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
box-shadow:none;
}
/* Menu Item */
#menu-language .menu-item{
height:31px;
}
But I want the layout of these elements (flags) to be different for the bottom menu in the mobile version.
I managed to add some CSS code, but it’s not perfect. The grid alignment is fine, but there’s a problem with the text being hidden on the right.
I would like the text corresponding to each flag to be placed below the flags (help-07b.jpg).
Here is the CSS code I am currently using:
/* Bruno Menu Language Mobile Bottom */
/* Grille uniquement sur mobile */
@media (max-width: 768px) {
/* Menu langues en grille sur mobile */
ul#menu-lang-1,
.menu-lang-1,
ul.menu {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
grid-gap: 10px !important;
padding: 20px !important;
list-style: none !important;
}
/* Items du menu */
ul#menu-lang-1 li,
.menu-lang-1 li {
width: 80px !important;
height: 80px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Images drapeaux */
ul#menu-lang-1 img {
max-width: 50px !important;
max-height: 50px !important;
}
}
/* 649px and smaller screen sizes */
@media (max-width:649px){
/* Barre de recherche radius */
.et-mobile-panel .active .et-overflow-hidden{
border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
border-color:#eaedf2;
}
}
Any ideas please?
Regards
