Hi there,
I ve just noticed that mark and quick css from enfold documentation to customize icon list are not working on small screen (mobile and desktop / every browsers). I’m using last version of enfold and WP. I’ve tried on two different websites. Same issue.
UPDATE : I’ve just found that there is a conflict with the quick css to obtain a Logo center with split menu. If I use this css from enfold documentation, every quick css do not work anymore on mobile and small desktop screen. Do you have an idea to avoid that ?
Thx
Lex
/*————————*/
/* CSS – Logo center split menu
/*————————*/
@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:240px;
}
#header .main_menu {
/*background: white;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}
#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}
But on your media-querrie you got a closing curly bracket – haven’t you?
You see that this here :
@media only screen and (min-width: 780px) {
opens but does not close at the end. and the code for #header .logo img is missing
See : https://kriesi.at/documentation/enfold/menu/#toggle-id-147
Ok. Got it. Thx. Best. Lex
Hi,
Glad this issue is sorted for you!
Please bookmark Enfold Documentation for future reference.
Thank you for using Enfold :)
Best regards,
Vinay