Split Nav menu above and below logo not working on mobile?

Ok on the desktop I want to have 3 links of my nav above the logo and 3 below. On mobile, this will not work so I wanted to use the hamburger menu Icon. For some reason, I can not get the hamburger menu icon to show up when in tablet and below and when I select type dropdown from Navbar settings only one of my nav menu links drops down the other one is ignored. So I am thinking once I do get the hamburger to appear it will only show 3 links not the 6 I intended.

2 questions.

  1. Am I setting up this split nav menu above and below the logo correctly or is there a better way to do it?

  2. On tablet and below how do I get the hamburger menu to appear with all 6 nav links?


Here is my site Read-Only: https://preview.webflow.com/preview/bobsstokeshop?utm_medium=preview_link&utm_source=designer&utm_content=bobsstokeshop&preview=4bb3d44237c11958cfc7d42b59195596&workflow=preview)

Still trying to get the hamburger menu to appear on the tablet and below sizes with all 6 nav links. Been 2 days on this and can not figure out what is going wrong? If anyone can guide me in the right way would be a huge help.

Update: I got the hamburger icon to appear now but it is still only displaying the bottom 3 nav links and not all 6.