I’m a veteran web developer and I can’t seem to figure out what’s happening. I have been working really hard to set my menu bar height to a very narrow height, and was unable to remove what looks like padding.
However, when I take a look in Preview mode to my surprise the menu bar is as I expect it to be with no padding.
I double checked to make sure I’m editing the right breakpoint (desktop breakpoint) and that I’m seeing it large enough in the design view so as not to accidentally trigger any of the smaller breakpoints (not sure if that’s how it works, but I’m just taking precautions).
IMAGE ONE is how it looks (correct) on Desktop Preview
IMAGE TWO is how it looks (incorrect) in the Desktop Designer
I’m only a few hours into webflow but if I’m already encountering these kinds of bugs I may just go back to hand-bombing my CSS like I’ve been doing for 20 years.
After a bit more sleuthing, turns out it’s the (currently) empty “Brand” container of the navbar element that is causing the discrepancy. This is still strange as that brand element is completely empty and has no fixed dimensions, margins or padding so should just collapse down to nothing.
I wonder if Designer sticks some arbitrary dimensions on that thing just so beginners will be able to select it more easily?
Yes, I can confirm that Designer is adding that padding to the empty element. I guess this is to help newbies find it? Not sure.
Is there a way to disable this so we can get “proper” WYSIWYG inside Designer view? Like a “collapse empty” toggle or "remove “wf-empty” class? I suppose that would create more problems than it solves.