Hi,
On mobile phone the image for the menu (the three horizontal lines, or ‘the burger’ I think it’s called), gets really squished between the header and the main content. It makes it hard to spot.
I’ve tried a few ways to increase the space around it, but I’m either not using the right commands or using the wrong location or….
I’m guessing it’s really obvious. Could you please help me out?
(Added a link to a screenshot of what I mean.)
Thank you!
Kim
Hey kimm,
Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
Vinay
Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 990px) {
#top .lvjk-search {
top: 0 !important;
}
}
Best regards,
Rikard
Thank you for your time.
I added it there, but there seems to be no change.
What am I doing wrong here?
Greetings,
Kim
Hi Kim,
Please try this as well:
@media only screen and (max-width: 767px) {
.avia-menu {
margin-top: -10px;
}
}
Make sure to clear the cache from the browser you are checking in.
Best regards,
Rikard
That makes the image more noticeable, which helps a lot.
But is there any way I can increase the room between the menu and banner image, so the image doesn’t have to encroach on the top menu?
Thanks,
Kim