What am I doing wrong? (Simple Interaction)

Guys,

Can you please tell me what I am doing wrong with this simple interaction I am trying to do.

When clicked I simply want the mobile navigation (hamburger) to turn sideways at 90 degrees, but open the menu. Then once the user clicks the hamburger icon again rotate back to 0 degrees and have the menu close.

First off, I can’t seem to test this without publishing live? Is this an error? Also, if someone could please help me I would greatly appreciate it. I am trying to publish this live tonight if possible! Thanks guys!

@sabanna @cyberdave @PixelGeek - I know you guys can help if you’re online I would greatly appreciate it!

Shared weblink: https://preview.webflow.com/preview/stscincy?preview=2faebed13c01582e8160e90969acb5b0

Thanks,
Sean K

Hi @seank,
just checked your project, it looks like you fixed it

@sabanna,

I fixed the interaction for the rotation but the rotation back to close the navigation isn’t working correctly.

I don’t know why you pick this way, but for such effect I am usually using css transformation which I am applying when there “open menu” state. Then there is no need to deal with interactions.
Here is screencast how it can be done:
https://drive.google.com/file/d/0B-7cg8BSq1Z_V3BwNkdQS19fRDA/view?usp=drivesdk

Only thing, sometimes there is little bug can happen and menu stop to work (open). Just add new navbar to the page and delete it again, it will fix the issue.

Cheers,
Anna

@sabanna, that worked! thank you for some reason I thought you had to do this with interactions.

1 Like

You are welcome :slight_smile: Happens to me too sometimes

@sabanna - one last thing. How would I change the color of the hamburger menu item when clicked to become red. I have tried to apply the “pressed” state and it didn’t do it.

Also, I am experiencing horrible glitches since the most recent apple update. The appearance panel doesn’t even want to work.

When will this be fixed… anyone know?

Sorry, didn’t get what do you mean :confused:

mobile menu, the mobile menu icon the three horizontal stacked lines.

For change icon color:

  1. remove font styling from icon (actually, you can remove class for it)
  2. style font color for menu button for “closed menu” and “open menu” states.
  3. don’t forget to apply transitions time for “transform” (it is for rotating) and “font color”

When you say “closed menu and open menu states” I don’t see those when I click open menu. I am only seeing the open state on the background of the mobile menu icon, not the actual icon image. Can you show me how please.

All changing you will do to menu-button, not to icon. When you change font-size or font-color to button, it will change size or color of icon.

Hmm I don’t think I am getting it.

https://nimbus.everhelper.me/client/notes/share/video/300100/RvTNBhXXbcxJhq7gfc1QKEfv59sMv2L6/none/06x1444012754659/video.webw

1 Like

@sabanna that was perfect - thank you so much Anna!

1 Like

You are welcome :wink: we all learn something from somebody else.

1 Like

its not done by no means. but please Anna take a look and give feedback. we are in the early stages still though.

STS Website

Well, lets see.
I think you would want to check menu links on desktop view, they are in staying in opposite direction (“home” - last). It probably because of float settings.
Yet icons in the row get stretched on big screen and looks odd :confused:

On mobile view, I would suggest to make menu links height bigger, because now it is easy to tap wrong one, they are too close (I have not fat fingers :wink: )

And last question (based only on my personal preference): is there were some other option about background color for the site?

Sorry, if I sound mean :confused:

haha you don’t sound mean, you’re truly awesome! They want a black background for some odd reason. I plan on placing background images on the sections to make it pop more - maybe even a background online video. For the menu on mobile, you are 100% right, I do need to increase the spacing - thank you for pointing this out to me. As far as the icons being stretched on wide screen monitors, what do you suggest, or what have you done to make this not happen? - Currently I have them set to % on widths, do I need to make them a solid pixel width so the stretching doesn’t occur?

Again, thank you Anna!

Sean

1 Like