I’m building a site with a custom navigation and am running into some problems with getting the nav icon to interact how I’d like it to.
Rather than using the stock hamburger icon in the nav widget, I replaced the icon with a ‘+’ with the word ‘Menu’ written adjacent to the left of it. Ideally what I’d like to do is make it so that when you click the elements within the Menu Button it expands the navigation menu while spinning the ‘+’ 45 degrees (turning it into an X) and changes the word from ‘Menu’ to ‘Close’. Upon clicking either ‘Close’ or the X, the word would change back to ‘Menu’ and the X would spin back 45 degrees, returning to the original +.
Right now I have it set so that clicking the Menu Button will open the menu drawer and turn the icon 45 degrees, returning back to normal on second click. I also have the actual nav links set to spin the + nav icon back 45 degrees. However, Im seeing a problem where after clicking a nav link, it spins the icon back 45 degrees properly but after that my initial interaction of clicking the Menu button no longer works.
My questions are how to make it so that clicking the nav links does not disrupt how the menu icon interaction works, as well as how to properly set up the word change that I’m looking for as described earlier.
Cool nav! It’s working fine for me on the subdomain site. Though the word doesn’t change to close at all. The preview sometimes does weird stuff with interactions and I tend to just test in the browser on the subdomain. If it works there, you’re good to go.
Thanks for the tips @DFink! Do you have any suggestions as to how to make the word change? I’d like for the word Menu to have an interaction where it quickly rises maybe 15px and fades to 0% opacity then have the word Close slide up underneath it into the same spot. I know how to make the first interaction, however I’m not sure how to make the second word slide into the same exact position. Any thoughts?
Thanks @PixelGeek, I’m still having a hard time figuring out how to close the menu too.
In unrelated news, I’m now encountering problems with my footer. It seems to be working properly for both desktop and tablet but the positioning on mobile is incorrect. I’d like it to be positioned to the bottom of the page (as seen on desktop/tablet) but on mobile it is floating and overlapping into my other sections. I’ve tried tinkering around with the positioning settings but cant seem to get it right. Is there anything obvious that Im missing?
Hi @Waldo, I was wondering if you could take a peek at some of the issues Im having here. I’ve been able to successfully set up the menu interactions so that when clicking to open the nav menu the + icon spins into an X, and clicking the X to close the menu spins it back to the +. One of the problems Im running into is when you click on a nav link instead of the menu button, I cannot get the + to behave properly. I have an interaction set up on my nav links so that when clicked the nav icon spins 45 degrees. For some reason, though, it does not actually accomplish this.
I’m also curious as to how I can have a word change from Menu to Close upon opening and closing the menu. I’m having a hard time stacking the two words directly on top of one another without shifting the positioning of the other nav elements.
