Restaurant Menu "Collapse" for Mobile

[Mr_Uddr (Dave)]

• Issue description:
  We have a number of clients using the Restaurant menu, looks great on desktop but due to the length of menu it would be great to have capability to collapse/expand sections in mobile view. I’m hoping some custom script perhaps has already been created for this?

• Link to the page with the widget in question:

The Horse and Jockey

The Little Jockey

[Max]

Hi @Mr_Uddr

I’ll gladly check with our dev team if anything can be done. Could you just specify what part of the widget you’d like to display before being expanded?

[Mr_Uddr (Dave)]

Hi Max, I think like any mobile based restaurant menu (justeat, ubereats etc) the initial Menu title/section would be clickable to be expanded.

So in this instance (see image) “Starters”, “On The Grill” etc could be hidden until click on mobile only. Open to any other suggestions from devs tho to shorten the length of menus such as this.

[Max]

Got you!

To customize the widget this way, please add this code to the Custom CSS field on the Style tab of your widget’s settings:

@media (max-width: 480px) {
	[class*="Item__MenuComponent-sc"] {
	  height: 30px;
	  overflow: hidden;
	}
	
	[class*="Item__MenuComponent-sc"].open {
	  height: auto;
	}
}

And this code should be added to the Custom JS field on the Style tab:

const menuItemComponentSelector = "[class*='Item__MenuComponent-sc']";
const sectionLayoutTabsSelector = "[class*='SectionsLayoutTabs__Component-sc']";

if (window.innerWidth < 480) {
	document.addEventListener("click", (e) => {
		const menuItem = e.target.closest(menuItemComponentSelector);
		const sectionLayoutTabs = e.target.closest(sectionLayoutTabsSelector);
		if (menuItem && !sectionLayoutTabs) {
			menuItem.classList.toggle("open");
		}
	});
}

Keep in mind that the Custom JS operates only the pages where the widget is installed, not in preview mode.

Test it out and let me know if you like how it works

[Mr_Uddr (Dave)]

This works great! Thanks Max!

[Max]

Amazing! You are very welcome

We would also be so grateful if you could look through the Restaurant Menu category in the Wishlist and vote for your favorite ideas. This would help us set priorities and move in the right direction.

And feel free to share your own ideas - we’ll gladly consider them too!

[Mr_Uddr (Dave)]

Hello @Max

I appear to have found a bug in our restaurant booking form. I’m unable to “unround” the form edges top and bottom leaving the effect seen in this image. Function to do so is there but having no impact.

Box'd Bar & Pizza

[Max]

Hi there @Mr_Uddr

From your screenshot, I see that you were trying to change the image corner radius.

However, if you want to change the widget corner radius, you need to go to the Appearance tab, choose Background and set the Corner Radius there:

I’ve chosen this option and published it. Could you please check your website and let me know if you like what you see?

[Mr_Uddr (Dave)]

Thanks @Max thats great and now working fine. I have another issue (sorry) in mobile view, the form slides to the left, leaving some of it out of shot and un editable. Video attached.

[Max]

@Mr_Uddr Hmm, I’ve checked it on mobile and it looks fine on my end.

Could you please specify the device you are using?

[Mr_Uddr (Dave)]

Iphone 13 pro max @Max issue only there when you try to 1st click into field. Using Chrome, issue is very repeatable

[Mr_Uddr (Dave)]

@Max So it appears clicking into the sections does not activate issue, only when starting to scroll page. Also appears ok on some devices, may be model related

[Max]

Thank you so much!

I guess the issue is related to the screen size, because the issue doesn’t occur on iPhone 14 and XS. I’ve shared your request with the devs and will let you know once any news comes up

[Max]

Hi there @Mr_Uddr

We’ve fixed the issue using this CSS code:

[class*="Content__FormContainer-sc"] {
  overflow-x: hidden;
}

Please check your website and let me know if it’s fine on your end now