Grid-based Navigation Menu Dropdown is different in Designer and Preview

Hi everyone,

Been playing around with Grid and I see the potential, so much so that I decided to redesign our site with it. I’m loving it so far.

I ran into a weird little snag when designing our navigation, though.

We have the hamburger menu on desktop. When you click the hamburger menu, the dropdown should only be the width of the grid in which it resides. The weird thing is that in Designer, it looks and works great (open Preview link below and navigate to Pages and “Grid Home”).

However when viewed in Preview or on a published site (https://tdc-2019.webflow.io/grid-home), the dropdown menu takes up the whole width of the browser and doesn’t respect the grid column it’s in.

Anyone run into this before?

Thanks in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/tdc-2019?utm_source=tdc-2019&preview=fdeda30096721ad0831dea3c51d1e310
Open Pages, go to “Grid Home”

Hey Vitaliyg,

After looking through your site I noticed, that first, you don’t seem to being using any of the new Grid System in the menu navigation. Second, I would try placing the parts that you interact with of the menu, in it’s own div, set the width you want.

Something I tried that seem to fix a piece I think, was cleaning up your style and removing unused class names. It seemed that when viewing the open menu in the editor, that is going to the setting panel of the Navbar and clicking the open menu bar, it would display the problem that you were talking about. But after I cleaned up you styles and then opened the menu, the width returned to normal, or what I see in the preview. So yeah try cleaning up your styles, maybe?

Hope this helps!

Thanks for taking a look. Check out the page called “Grid Home” to check out the grid menu.

I tried setting the width of the Nav Menu to be the same FR as the grid column, but it’s not accepting FR as a unit.

You are probably right about my dirty styles. I wanted to create a new project originally but wanted to borrow a lot of the animation from the original site. Maybe I’ll create a new project just to test this out.

Thanks for the feedback!