Streaming live at 10am (PST)

Hover interactions and animations

Hello everyone,
i’m building my first project and i need your precious help :slight_smile: I’m not a total newbie but not a professional developer.

I’m building my header menu. If you click the restaurant (ristoranti) section you can see what i’m trying to achieve.

I need an hover effect to highlight the currently selected option. At every voice there will be a button to go directly to the page.

I have two question:

  • I’m achieving this result by making an interaction and an animation to the group and then animating every single object. This is very time consuming and it will be very difficult to manage when there will be a lot of elements there. Is there a better way to make that? Is that the correct way?

  • I’m not able to make the orange button at 100% height of the parent div even if it’s set to 100% height. What’s wrong with that?

Any help or suggestion will be really appreciated.
Thanks a lot :slight_smile:


Here is my public share link: https://preview.webflow.com/preview/langosteria?utm_medium=preview_link&utm_source=dashboard&utm_content=langosteria&preview=8388ca069399ccfeebb84275a77e7f58&mode=preview

Hi Filippo, welcome to the forum!

I’m not 100% sure what you are trying to achieve. Are you trying to highlight the current page? Try adding a page link to your navbar links (e.g. “Ristoranti” -> Element Settings -> Link Settings -> Page “Home”), change to the Style tab and you will see the current state and be able to give it a styling:

grafik

Something like this:

grafik

Orange button? Do you mean your logo? Check for the image settings, it has a set hight of 30px. Remove the px value and add a div to size it (parent element is your menu container grid right now, which might be too big).

Hi Christ, thanks for your reply.
That’s not what i want to achieve.

The restaurant link opens a list of all restaurants. I want to highlight the menu under the mouse and there will be an orange button “Prenota” on the same row to make a reservation directly to that restaurant.

So there will be more than 1 restaurant in that menu. I need to animate them one by one? Or is there a better way to make them?