Greetings,
I have succeeded in changing the size of my website logo on mobile devices, however, on Kindle and iPad, the menu and the logo overlap eachother
Image: https://ibb.co/zJ5t9KR
How can i change the size of the logo and have it fit without overlapping with the menu, OR, change the menu to BurgerIcon on iPad and on Kindle ?
Thank you
Hey Mohamad,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 1024px) {
nav.main_menu {
display: block !important;
}
#avia-menu .menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}
Best regards,
Rikard
Dear Rikard
Thank you for your help
I already have the following code to affect mobile devices below 767px
@media only screen and (max-width: 767px) {
.responsive #top .logo img {
max-height: 50px!important;
}}
When i put your code, it works great on iPad and Kindle, however it also affects everything below 767px devices.
Is there a way to use your code on devices that are above 767px and max 1024px ? and keep my code working on mobile devices that are not iPad and Kindle ?
Thank you very much
Hi,
You can change your code to following one
@media only screen and (max-width: 1024px) and (min-width: 768px) {
nav.main_menu {
display: block !important;
}
#avia-menu .menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}
Best regards,
Yigit
THANK YOU !!!
Worked perfectly !
Hi,
Glad we could help! :)
For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)
Best regards,
Yigit