Question:
How do I stick icons to each tab of a menu so that they follow the movement of the tab?
Product:
Wix Studio
What are you trying to achieve:
I want to add Icons to each tab of the (mega)menu. When hovering with the mouse over the tab/container it will change the image from black&white to the color version of it, also when clicked.
Actually I want the exact same effect as the menu from the Pokemoncenter website: Pokémon Center UK Official Site
I do have my own icons, I just want the same look and feel and how it reacts to the screen. When the window is being slid to smaller proportions (width) it will change to the hamburger menu from a point where the menu is getting too small. So the Images should also disappear from that point when going to the Hamburger menu.
The menu of Pokémoncenter has everything I want. I tried to inspect the code on that website to learn a bit but I am not a coder. I only can understand a bit of it and how it works but can’t make codes myself. (unless with AI or examples from others)
What have you already tried:
- I tried one Menu with in each tab a big menu.
- Multiple containers stacked horizontally
- for each tab a new menu and stacked those horizontally.
Additional information:
If someone has an easy option on how to do this that would be great! Or maybe I’m overthinking it and I should delete my icons and just have a normal Mega Menu.
Thanks in advance!
It should be possible. I will have a play with it to see what is required.
1 Like
That would be GREAT!
I have been trying for so long (almost a week) that I’m not sure what to do anymore.
And I cant get to designing the rest of the site if I’m not sure how to menu will turn out.
It should be possible, but I do not know how to make this happen simply. It looked simple to do but still, here I am 
Let me know if you found something and thanks for being willing to play with it!
Hello GS_Shops,
You can add hover animations to boxes or start with a hover preset to create your menu.
Here is a sample with no code.
https://www.dev-site-1x8046.wix-dev-sites.org/hover
You can also do it with code but it isn’t necessary.
G
Hey Gus,
Thanks for replying.
So you suggest working with container boxes and 2 separate images with hover animation without using menu boxes?
Can I then stack them horizontally and make them disappear when the window width is made shorter to let it transfer automatically to a hamburger menu?
Hi @GS_Shops,
Thanks for the clarification.
For your design, you can create a container with two states.
In the first state, include your button.
In the second state, set up the container with the menu options.
Initially, keep the second container hidden.
Then, configure it so that when a user hovers over the button, the container with the menu options becomes visible.
Let me know if you need more details or assistance!
Best, Gus.
Example of custom hover menu
https://genius-pro.wixstudio.io/ifscapital