I’ve designed the Desktop view of my NavBar to have the logo in the middle, and the page links on either side, but when I switch to designing the dropdown menu only half of the page links show up. (Pictures below, view link at the bottom).
I have used a grid to build the Desktop view NavBar, with Div blocks holding each “batch” of links on the right and left. I tried moving the arrangement of the lefthand Div to see ifit would end up in the dropdown, but it doesn’t show up, and only messes up the Desktop view.
For optimal navbar menu functionality, we recommend using flexbox layouts instead of grid layouts. The built-in navbar element is designed to work seamlessly with flexbox, which you can learn more about in our flexbox documentation (https://help.webflow.com/hc/en-us/articles/33961260795155).
When using the navbar element, all navigation links should be nested inside the nav menu element. This ensures proper display across both desktop and mobile views. If you’re looking to create a centered logo design, the navbar logo center layout preset is your best option - it automatically positions your logo in the middle and ensures all navigation links properly collapse into the dropdown menu on mobile breakpoints.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Your left-side links aren’t inside the native Nav Menu, so they won’t carry into the dropdown. Wrap both link groups inside the Nav Menu div and use flexbox to space them around the centered logo , that keeps the desktop layout intact while fixing the mobile collapse.
In case you don’t want to change the structure or design of the navbar on other breakpoints, the simplest way to setup a working mobile menu would be to include a third grid which will only be visible for mobile breakpoints and hide it on larger breakpoints by default. And have all the 4 links inside this block for it to be visible in the dropdown. Hide the Nav Left and Nav Right grids on mobile breakpoints.
