Hi,
I’ve searched the support but I cannot find a solution to these problems concerning teh hamburger menu:
– on mobile screens the menu has a lot of whte space above the first menu item, how can I make sure it starts at the top?
– on mobile and iPad screen the home icon I’ve used in the menu is not aligned at the bottom, how can I make sure its aligned correctly?
Thanks a lot!
Hey JantienM,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:767px) {
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
line-height: 4 !important;
}
}
Hope this helps :)
Best regards,
Nikko
Hi Nikko,
Nope sorry that didn’t work.
I must say I am already using some code that’s handling the menu and the hamburger menu, maybe hat’s intervering?
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.responsive #top #header {
position: absolute !important;}}
@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;
}
}
Hi,
Did you add Nikko’s code to the very top of quick css so it runs first?
Best regards,
Jordan Shannon
Jordan, I tried, but still doesn’t work I’m afraid. Any ideas?
Thanks
Hi,
How about trying this css instead. Keep in mind there will still be a little space for the search and close icons.
#av-burger-menu-ul{
padding-top:110px!important;
}
Best regards,
Jordan Shannon
Thanks Jordan, that worked. Topic can be closed.
Hi JantienM,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria