How To Give Each Menu Section A New Style

If your using the Restaurant and Bar Menu plugin you’ll see that every menu item is created in the same way as default. In this brief tutorial, I’ll demonstrate how you can modify the appearance of a section within your menu.

In order to follow this guide you’ll need to know how to include CSS codes to any WordPress themes or children themes. If you’ve not done this before, test one of the numerous WordPress plugins that simplify this process. I would recommend the Simple The Custom CSS.

Why should you customize a menu’s design?

If you’re a restaurant’s owner or web developer working for an eatery, you’re aware that lots of thinking goes into how the menu is created. The most popular methods is to attract the attention of diners to specific sections on the menu. It is typically accomplished by designing the menu area in a unique way, perhaps it’s inside a box, or perhaps the font is unique.

However, how can we duplicate this style of design on our website? Many people attempt to embed CSS codes directly into text using WordPress’s editor. WordPress editor. However, this is typically not recommended. If you alter the design or theme in the future then you’ll need go back through all menu options to alter each one by one. There’s a need to create standard CSS rules that are targeted at particular sections.

To assist with this, Food and Drink Menu covers every menu section with a class that refers to it’s unique ID to WordPress’ database. WordPress database.

Let’s see how this is done.

To illustrate this, I’m going modify the two-column menu in the Up theme. Up theme’s demonstration. The menu below looks as before we begin.

I’d like to place the Desserts section on an untanned light background to ensure that it stands out. To achieve this it is first necessary to identify the ID of the section. It is the unique identification number that WordPress assigns to the section to the database. To locate it, open your Menu Sections page on your WordPress administration panel. After that, open the Desserts section to edit.

When you have confirmed that the Desserts section is up Check the URL that is currently displayed within your browser. (This is the lengthy piece of text which begins by hyphenating http ://). In this URL is the text which appears to be “tag_ID=55”. We’re trying to find the tag_ID number. The image above the number we’re looking for is 10.

Armed with this ID We can now create some CSS to achieve what we’d like. Each section of your restaurant’s menu will be wrapped with HTML code that looks similar to this:


Notice the 10 on the page? This is the unique ID we’ve just discovered. We’ll make use of the section, “fdm-sectionid-10”, to create an CSS rule that applies only to the section.


Use the correct ID for the menu, not 10!

This time we’ve added a brand new background color for the Menu section. (Wondering what the reason behind two backgrounds call? The first is a fallback option for older browsers that do not have support for transparency.) If we glance at the menu this is what it appears like.

Okay, we’ve got our background. However, the content is through the entire width. It’s not appealing So let’s include some CSS code to a few of the elements in this section to improve the look of it.

.fdm-sectionid-10 .fdm-section-header The padding is 2em, border is none .fdm-sectionid-10 .fdm-item The padding is 2em, 0;

Then take a look it.

Much better. Utilizing the same method using the same technique, you can apply custom CSS designs to each element in that section, adjusting the font, font size and colors, as well as the size of images and even the arrangement of the elements. Here are some examples to help you get going.

• Make the section's title REALLY large The section title should be HUGE .fdm-sectionid-10 .fdm-section-header the font size is 48px.* Italicize the name of menu items within the section .fdm-sectionid-10 .fdm-item-title Italic font;

Leave a Comment

Your email address will not be published. Required fields are marked *