Mobile Menu Stretches Header Image

Hi there @liskabora,

Thanks for reaching out.

It’s possible the issue you’re experiencing with the mobile version of your site is likely due to CSS styling.

Looking at your site, I was unable to check and specify the specific CSS, however, you can make specific changes for mobile view using media queries.

Here’s a general idea of how you can do this:

@media only screen and (max-width: 600px) {
.header {
position: relative;
}
.menu {
position: absolute;
top: 100%;
}
}

This will move the menu below the header on screens smaller than 600px. Please replace ‘.header’ and ‘.menu’ with the actual class names of your header and menu.

If you’re not comfortable editing CSS, I’d recommend getting in touch with a professional developer or considering our customization services.

Let us know if you need further assistance.

That worked, thank you!

I just had to make one minor tweak to get the tablet version to display properly. Posting it below for anyone else that encounters a similar issue:

@media only screen and (max-width: 800px) {
.header {
position: relative;
}
.menu {
position: absolute;
top: 100%;
}
}

Hi @liskabora

That’s great to hear! Thanks for letting us know. I am glad that we could address your issue.

Should you have further inquiries, kindly create a new topic here.

Thanks!