Responsive accordion navigation. Help!

Hi all!

First time posting to the forum. My query has two parts:

  1. I’m trying to create a nav bar interaction where the menu changes to a hamburger at the mobile landscape breakpoint, and when it’s opens it pushes a drop down “project contents” down. Using responsive positioning it does this in design mode…


…but doesn’t work in preview or when published. It seems to go back to some default interaction.

I also tried to create this from scratch using a show/hide animation, but ran into a snag where the “hide” interaction would change the Layout of the menu div to hidden across all screen sizes and it wouldn’t show up.

  1. The second aspect of what I’m trying to do is related to the drop down that I want the nav menu to interact with. I have a sticky sidebar table of contents for the page — that’s working. But on mobile landscape I want it to become a drop down attached to the fix nav bar at the top. I created a hacky work around where one gets hidden and the other shows up, which won’t be ideal when I inevitably need to edit the content and links. Is there a way to do this in Webflow?

Going for something like IBM has on their case studies page: Audi UK | IBM

Hope someone can help!
Alex


Here is my site Read-Only: Webflow - Rework Alex Burton Design