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.
Links to the site are below:
Below are a couple screenshots just to give some context: