Push Nav Hamburger Menu change with Animation

[wademd]

Hello,

Im putting together a documentation site with this theme and my client wants to utilize the Push Navigation full screen. The only issue is that they want to keep the header up there so I dropped the Push Nav to the distance from the top. I have 2 issues though;

1. I need the close button to replace the hamburger menu.
2. The animation between the menu+close icon need to utilize the “Squeeze animation style” from https://jonsuh.com/hamburgers/ (1st row and its the 2nd option from the left in the teal green box)

The problem is that I cant get it to work. I apply the code that they mentioned in the set up. The html has been applied to sf-theme-overrides.php file and I applied the javascript in the theme settings in wordpress admin panel. I can see that the code seems to be working and java gets called because the “is-active” class gets added when I click the menu button and the style is getting applied from the extra stylesheet since its now black. But something seems to be blocking the switch to the close button. Not sure if I am missing something. Any chance you can assist in letting me know what else I might have to change or adjust to get this to work?

Thank you!

Wade

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

The class hamburger--squeeze does not have the required CSS loaded in the theme main.css file, using the chrome inspector you will see no styles are added for that class.

As a quick test, grab the raw CSS from their github, add this to Theme Options => Custom CSS. What is the result?

Thanks.

[wademd]

Yep, that solved it. I tried linking the css file and for some reason it wasnt picking it up, but placing the squeeze css directly into the theme-options css editor, it worked just fine. I dont know why I didnt see that before. Thanks for the help.

[David Martin – Support]

Great, glad to help you.

– David.