Streaming live at 10am (PST)

Image-based menu bar issue

Hi, I’m developing a website for my family’s Typography business.
I want to include the historic background of the business as part of the UI and I thought of doing this by using physical assets (movable typographic types). I’ve translated those into pictures and made a menu bar design I’m happy with.

I’m running into an issue though: I want to animate the menu button, for this purpose I split the bar into four pictures with .png extension so they’re separate. However, if I do animate just the image representing the word “MENU” (MenuImage inside Read-Only) it will take an action whenever I click on the whole width of the menu bar.

I understand why it is happening, as the image doesn’t contain just the “MENU” portion of data but also the transparency part of it.
I’m looking for any possible solution. I’ve thought about removing the transparency and placing the picture manually but I highly doubt I’d be able to keep it responsive that way.

Halp pls, I’m in a no-way-out.
Thank you! :slight_smile:

Here is my site Read-Only:

Create a new div to sit above (higher z-index) the current navbar.
set width to 100vw and height to 5vw, set position to Fixed (top), set layout to flex.
Place in it divs with specific % width that will fit the buttons beneath. Set interaction to the correct div to create your desired action.

I hope this helps.

Hi Eli11, thank you for your help.

I think I’m getting this wrong one way or another.

I created a new div > set postition to Fixed (top) > set it to flex > set width to 100vw and height to 5vw.
After I’ve done that I tried placing it inside a new div with % width but had no effect.
If “certion” is not a typo I am really missing something here.

Let me know, thank you very much!

The div you created with the 100vw width and 5vw height should be the parent for the other divs placed inside it, for the children divs give a specific % to match the width of the buttons behind.
(Sorry for my english… this is not my first language).

I see, I’ve understood now. Don’t worry about your English, I should’ve known what you were talking about but I’m just too much of a newbie on web layout. :sweat_smile:

Anyway, I played around with the first div you suggested. I was able to give vw based margins that match the responsive behaviour of the navbar menu image, it tracks it perfectly.

I set the following parameters:

  • margin top 0.55vw
  • margin left 6vw
  • height 3.74vw
  • width 14.8vw

I’ve also learnt what you can do with what you suggested.
Your contribution inspired me, taught me something new and was really helpful, thank you!

Ps: I checked some of your work, love it. I do some 3D artworks too, hit me up on Insta if you like, user is @nicdarkstar.

I’m glad I was able to help! :grinning: