Help Creating New Menu Tabs

Hi,

I’m new to webflow :slight_smile:

I am creating a restaurant website. If you view the link you will see it has these tab buttons that say Lunch, Dinner, Appetizers. I want to add more. I copied the button and I also created all the CMS items for the other buttons I want to make like “Pasta”, “Wine”, etc.

What I don’t know how to do is link that button to those items and make the design elements (all the food items appear when I click it, the way it works on the other buttons already created in the template.

Please Help. I have been going at this for hours now and I am watching the videos and will continue to watch them.

I sincerely appreciate any guidance you can give me.

(See link for site below and screenshot to see what section I’m referring to)


Here is my site Read-Only:

https://preview.webflow.com/preview/buona-gente-restaurant?utm_source=buona-gente-restaurant&preview=569b8da82d45b47682e746d9ef56e258

SCROLL DOWN - on the home page till you get to the menu buttons, you can’t get there from the MENU NAV button.

Hi @northmoniker ! Just follow these few steps:

  1. Select a tab pane and do a copy paste.
  2. On the tab pane you just paste, select the collection list
    Image 2018-09-13 at 11.22.0...
  3. Go to settings and change the filter for whatever you want
    Image 2018-09-13 at 11.24.5...

You’re done :smiley:

Donald,

If I can do what you say, I should be able to finish the site in time.

Will you be around in the next few hours to answer any follow up questions?

1 Like

Of course! I’ll be happy to help :slight_smile:

Hey Donald,

Hope your weekend is going great. I am trying to replace the lightbox images on the home page.

When I did replace the 1st image, it only changed the image that appears after you click on the light box media not the one that is showing on the page before any clicks.

Can you help me out? I watched the lightbox video tutorial and it doesn’t make it clear.

Thanks for your help.

Here is link to site:
https://preview.webflow.com/preview/buona-gente-restaurant?utm_source=buona-gente-restaurant&preview=569b8da82d45b47682e746d9ef56e258

-C

Hi @northmoniker !

To change those images, you have to change the background images of recipes div. Hope that helps!
https://cl.ly/fb75d2ffa4d5

Note that you have to change the images in the lightbox settings as well.

Donald,
You will notice in the screenshot that the recipes div section only seems to come up on that specific photo. Was it done incorrectly or am I just not understanding something?
I figured it would be wrapped around the entire collection of images?

From your instructions, I thought I could go to recipes div, change all images in there and then it would change all images on that section. That’s not happening bc the only pic in the recipes div that I can see is one on the far left. Sorry to ask dumb questions. I sincerely appreciate your help. You’re the only one that offered.

Alright so here’s a little video

  1. Copy the ico wrapper from the second div and paste it in the first one.
  2. Remove the Recipe div from the first div.
  3. Go to the first recipe div and remove the background image.
  4. Give it the combo class 1.
  5. Give it a new background image.
  6. You can now change all the background images.

omg Thanks Donald! I will try to do copy what you did. You make it look so easy but that video was inspiring to know that it really is that quick if I know what I’m doing. Webflow is awesome.

How long have you been using it?

1 Like

No problem man! I’ve been using Webflow for more than a year now and I use it every single day. It’s a really powerful and time saving tool. There’s a learning curve but I’m sure you’ll figure it out!

1 Like

Hey Donald,

OK I got the images up :slight_smile: The lightbox works for images 3-6 but the first two don’t work (is is references the old lightbox images).

Also the background image on pics 3-6 is not there. When I try just adding the background image it doesn’t come out like the first two images (1-2).

Any idea what is going on here?

https://preview.webflow.com/preview/buona-gente-restaurant?utm_source=buona-gente-restaurant&preview=5aa1d4c1e7135f48ee3529558605e8a0

I clicked generate new preview link by mistake so I don’t think the old one will work.

Here’s another video

  1. copy and paste the lightbox link in the 2 first divs
  2. delete the recipes div on the 2 first divs
  3. delete the background image of the lightbox link
  4. you need only 1 image per lightbox link
  5. make sure all your lightbox link are linked together

OMG thank you so much. I learned a lot just watching that and it totally makes sense the way you had to do it.

Not sure why the other old images at the end of the video were still showing but I think I can figure it out.

I haven’t changed the image, I just showed you how to.

No, I know. thank you.

What is the deal with deleting the two redundant recipe div blocks? That is what I said you do on the video, right?

DID IT!!

:slight_smile:

thank you so much Donald, I couldn’t have done it without you.

1 Like

Hey Donald!

Can you take a look at the blog teaser section on homepage when you scroll down. You will notice there is an empty container. I am trying to link the collection of blog posts to that container section. Can you help show me how to do this?

https://preview.webflow.com/preview/buona-gente-restaurant?utm_source=buona-gente-restaurant&preview=5aa1d4c1e7135f48ee3529558605e8a0

Hey @northmoniker,

I’m glad your design issues are getting solved swiftly, however, please create new forum topics for additional questions as it’s not fair for users searching the forum in the future. There are too many questions that are unrelated to the main forum title.

Thank you,
Naweed

1 Like

OK thank you for telling me. This is the first time I’ve ever really engaged in a forum outside of school so I’m not familiar with the proper etiquette.

I’ll make sure to keep each topic on point before creating a new one.

Thanks Naweed,
northmoniker

Hi Donald,

This is the last thing I have to do on the site.
I copy and pasted the panes (renamed them accordingly) but could not “select the collection list”
I found where the collection list wrapper filter settings are but when I clicked on the filter I wanted (I renamed the collections from Lunch menu 2, 3, 4 to Dessert, Wine, Beer, respectively and when I did that it said that the menu collection was empty. :frowning:

Can you check my link and see what’s up, please?

https://preview.webflow.com/preview/buona-gente-restaurant?utm_source=buona-gente-restaurant&preview=5aa1d4c1e7135f48ee3529558605e8a0