Hi lapetitefrog,
A customer of mine used the Shortcodes Ultimate plugin to create different tabs with each menu. That was a pretty easy-to-use solution to the problem of large menus.
I’ve seen other people just place them on separate menus on separate pages. Sometimes this is best for Breakfast, Lunch and Dinner. And the ability to place one menu section on multiple menus was designed precisely for this kind of situation, in case you have a beverages section you want on all menus.
The Shortcodes Ultimate plugin looks like the best option for me, because my client has three different restaurant locations and a separate menu for each location. I’m having trouble understanding how to use the food and drink menu short code with the ultimate plugin shortcode. I want to place the codes so that each menu section is a dropdown style. Is there a shortcode for each menu section? So far, I’m only able to find the main food and drink menu short code.
Thanks!
No unfortunately there’s not a Menu Section shortcode. You’ll have to create a separate Menu for each section then use that shortcode.
Hi lapetitefrog
I am that happy customer that Nate mentioned 🙂
Using Shortcodes Ultimate on my site looks like this:
[su_tabs style="default" active="1" vertical="no" class="my-custom-tabs"]
[su_tab title="Offers of the week" anchor="week"][fdm-menu id=85 show_content=1][/su_tab]
[su_tab title="Burgers" anchor="burgers"][fdm-menu id=21][/su_tab]
[su_tab title="A la carte" anchor="carte"][fdm-menu id=68][/su_tab]
[su_tab title="Desserts" anchor="desserts"][fdm-menu id=98][/su_tab]
[/su_tabs]
It’s just the css of shortcodes ultimate has to be tweaked to match your site’s design
Instead, you could also create a parent page Menu and subpages for each restarant. Then you would not need the shortcodes plugin
Thanks Nate and nuobodu!! The code definitely helped me out!
Regarding the subpages route, I’ve tried that in the past and failed to create a clean dropdown menu that worked with mobile phones and tablets. (I’m sure it was much simpler than I made it to be.) And so I resorted to just putting the menus all on one page.
Also, how do I tweak the css so that it matches my site’s font? Would I change the css in my wordpress theme css file? Or in the Shortcodes ultimate css editor?
Thanks! 🙂
to tweak the code of SU, its better to use SU css editor.
here is the sample. i left only those with font sizes, the rest (backgrounds and colors) fill in with your needs:
<style>
.su-tabs.my-custom-tabs { background-color: }
.su-tabs.my-custom-tabs .su-tabs-nav span { font-size: 1em; color: }
.su-tabs.my-custom-tabs .su-tabs-nav span.su-tabs-current { background-color: ; color: }
.su-tabs-nav span:hover {
background-color: rgba(, , , 0.1);
}
.su-tabs.my-custom-tabs .su-tabs-pane {
padding: 1em;
font-size: 18px;
background-color: transparent;
}
.su-tabs-pane { background-color: transparent; color: inherit; border: ; border-radius: }
.su-tabs { background-color: transparent; border-radius: ;}
</style>
That’s great! Thanks so much for all of your help! 😀
Thanks for jumping in there nuobodu!
