Help with mobile design navigation - row with 3 columns

So I have a nav bar made as a row with 3 4-4-4 columns, with the middle one having my logo.
I am trying to figure out a way to introduce the first and last column appear when it comes to mobile (have the second one set to visible:none)
So that when I click the hamburger icon I get my navbar.

I’d also like to disable scroll whilst this is open to avoid my audience scrolling about when the should just close the menu or make a selection.

Currently it’s pretty messed up as you can see below. Using position relative and moving it about it kind of works but then again that’s not responsive. Does anyone have a solution for me?


Here is my public share link: https://preview.webflow.com/preview/masters-mother-site?preview=ee92d90f5c5d8ed7a7ae1d55f00728b4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.