Changing the mobile menu

Hello,

We are currently using Talon Pro for our company website. We are wanting to change the style of the mobile menu. It breaks the site essentially on mobile phones when a user opens the menu and scrolls down. All of the page content smushes to be really tiny and it looks really bad. We were hoping to make it so it drops vertically instead of opens horizontally.

Hello,

It shouldn’t behave like that by default, can you please provide a link to your website?

Kind Regards, Roman.

Hello,

It is savannaspringswater.com

Hello,

I’ve just checked your website mobile view and it looks as it should:

07

I don’t think that there is an easy way to make it expanding vertically.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hey Roman. Are you actually viewing it on a mobile device or on your
browser? Because i tested on browser mobile view and it was fine but the
true mobile is where it goes wrong.

Also the issue is more around when you scroll down the menu, obviously you dont NEED to scroll down because the menu isn’t long, but here is a screenshot of what it looks like when I do, on a mobile device and not my inspector via my web browser.

Hello,

I’ve just checked your website on Android phone and it looks as on my screenshot above.

Can you please specify your device and browser that is affected by this issue?

Kind Regards, Roman.

I was testing with my phone, an iPhone 5s and a simulated phone, iPhone 6s Plus. One was in Chrome, the other Safari. My partner tested also with a Samsung Galaxy 8. It is happening on all three. The first screenshot I sent you was on the 5s and the one below is the 6s Plus.

Keep in mind, this only happens when you scroll down. Not initially right when you open it.

Hello,

I asked our Developer to check this issue, let’s see what he says.

Kind Regards, Roman.

Hi @sean,

I see what you mean. I’ll look into fixing it now.

Vlad

Hi,

For now, try to add this in Customize > Additional CSS:

@media (max-width: 600px) {
	.panel-row-style {
		margin-right: -15px !important;
	}
	[off-canvas*=left] {
		z-index: 99;
	}
}

Let me know it goes please.

Thanks Vlad,

I will test when I get home.

Hey Vlad,

That seemed to do the trick! Wonderful support.