Hi Enfold team,
I´d like to change the height of the mobile menu area viewed on smartphones to get the same height as it is on larger screens.
Please see screenshots and please let me know how to do.
Thank you very much in advance.
Best regards, fkm
Hey fkm,
Thanks for contacting us!
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
@media only screen and (max-width: 767px) {
.responsive #top .logo {
height: 50px !important;
}
.responsive #top #wrap_all .av-logo-container {
line-height: 50px;
height: 50px;
}
}
Best regards,
Yigit
Hey Yigit,
thank you very much for the quick and helful reply – this code works well. Looks great!
Now I would like to increase the space above the menu items at the flyout area and, if possible, keep the border (black line) below the header at the flyout area as well.
Please see screenshot “enfold_flyout-menu.jpg”.
Also, I’m wondering if it’s possible to remove the middle line of the burger and keep the menu with just two lines that become an X!?
Please see screenshot “enfold_menu-burger”
Please help.
Thank you very much in advance again.
Best regards, fkm
Hey,
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
.html_av-overlay-side-minimal #top .av-burger-overlay {
margin-top: 51px;
}
#top #av-burger-menu-ul {
padding-top: 20px !important;
}
#top .header_color .av-hamburger-inner {
background-color: transparent;
}
Regards,
Yigit
Hey Yigit,
exactly like that – just awesome.
Thank you so much!
Best regards, fkm