My open menu navbar in tablet & below is different than the published & preview menu bar in webflow

Hey webflow community, looking for some help with one of my projects.

I am designing a responsive navbar and it is pretty much working on all the larger screens, however, for tablets & below it just does not seem to work.

My open menu navbar in tablet & below is different than the published & preview menu bar in Webflow.

I don’t know what is causing this and looking for some help.

What is happening:

When you click on the hamburger icon on the tablet & below, the navbar that’s shows is different from what I styled in the designer. (visible when you toggle on the open menu setting in the designer)

It is only showing partial links & the sub-menu dropdown styling is also different from what I have styled in the designer. (again visible when you toggle on the dropdown open menu setting in the designer)

What I want it to do:

I want the web flow preview & actual published site view menu to look exactly like the design that I did of the menu and the dropdown submenu in the open menu bar.

Important Note:

  1. The base breakpoint & above versions are working fine and I don’t want to change them. I only need fixing on the responsive screen size where it starts showing the hamburger menu icon (tablet & below).

  2. I have styled the navbar for tablet, mobile portrait & mobile as well, just need the open menu styling to work on the preview & published site.

Please help if anyone knows how to fix this, as I have been breaking my head over this for 2 days with no solution so far.

Thanks in advance!


**Here is my site Read-Only Link: Webflow - Outscal.com official site