Food menu font size

[brian wall]

I find the food menu font too large, but there is no option to alter it, only to change the font. Any suggestions?

A related question re food menu ( I call it that as ‘menu’ also refers to navigation!!): I setup my food items and groups anda page assigned Full Menu but a) how do I alter the order they appear in and b) why do sub menus appear just as a menu?

The site is very much work in progress and not live!!! Mainly intend for mobile devices.

[Bill Robbins]

Hello Brian,

Thank you for your business first of all. Great question too. You can change the size of the food menu item’s title. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .menu-title h3 {
   	font-size: 18px;
   	max-width: 80%;
   }
   

   Replace the 18px with the size in pixels you’d like to have your text be.

3. Update your settings.

That snippet also adds in a maximum width for the titles. I noticed that most of the menu items had long names so that will help with the alignment for you.

---

You can change the order of the food menu items by using a plugin called Simple Page Order (https://wordpress.org/plugins/simple-page-ordering/). It’ll let you drag and drop the items to set the order you’d like to have.

WordPress creates an option automatically that lets you set a menu group to have a parent group. For best results keep them all on the same top level. That’ll work out best.

If you need to change the order of the menu groups themselves, there’s another plugin that lets you do that at https://wordpress.org/plugins/taxonomy-terms-order/

Let me know if you have any questions or trouble.

Have a great weekend,
Bill

[brian wall]

Thanks, it worked a treat for the food items but not for the prices. Now the headings are out of proportion and need to be smaller!

I’ll give those plugins a go tomorrow too, thanks.

[Bill Robbins]

You can change the size of the prices if you need to as well. Here’s the snippet for your Custom CSS that applies to them:

.menu-title p.price {
	font-size: 18px;
}

Just adjust the size to fit your needs.

Bill

[Author]

Posts