Trouble with Nav Menu layout (multiple Nav Menus)

Okay, So admittedly there’s a lot going on here. I’ve got a primary (translucent) navigation bar that I have set to disappear on scroll-into-view/scroll out of view, swapping with a second opaque nav bar. In reviewing and trying to edit/fix/customize the nav links and how these two navigation bars appear in Tablet and Phone viewports. Specifically, there’s a strange mystery link (Duplicate of Contact Us) being pulled in from the Desktop Nav-Menu Link list. Bugs in the designer started popping up everywhere, without anything more than clicking Open Menu and flipping between the viewports. I’ve taken screenshots and recorded a video to replicate the problem. This is just one of a handful of annoying and time-consuming bugs that have come up. I’m done burning cycles trying to resolve this, and am seeking help.

I’m using Google Chrome, the latest version, have done a hard reset/reload of the browser tab.
Here are the links:
https://preview.webflow.com/preview/embodiedintimacy?preview=f1dab16c0d03bee91540ded0f0e9fe4f

http://embodiedintimacy.webflow.io/

Here’s the soundless/pointless video that I hope you can make sense of (showing the steps to replicate)

Here are the screenshots of how things look when you go back from Tablet to Desktop view:

!
29%20PM|690x400

Hi @Derek_vdS, it looks like the issue might stem from fact that there are two Nav Menus being used in the Navbar widget in the Navbar symbol, I would only use one Nav Menu instance per navbar widget:

I made a quick video:

https://cl.ly/0D0d190C252Z/Screen%20Recording%202018-04-01%20at%2008.32%20AM.mov

Does that help?

@cyberdave,

Thank you for this! I was wondering how the system reconciles these multiple nav menu elements behinds the scenes. I’m still not sure I understand, but I appreciate the solution.

Another matter has popped up, seemingly inexplicably, with the secondary, scroll-into-view navigation bar I have. Suddenly, without any changes or edits to that specific element/symbol, and while only editing the rest of the page, the “Header Nav” suddenly expanded in width, causing a right scroll overflow issue. I’ve recorded a video to demonstrate, and you can see on the preview page attached below. I went back to a previous published version from an hour before and noted that there are literally no changes from that styling/setting to the current one. I have no idea what happened, nor how to solve it.
I reviewed all the other sections and elements for any random overflow issues; nothing comes up. I also checked the Body styling, even deleting the class for good measure to reset. Still no fix. Please help?

Video demonstrating the problem

Webflow.io Site
http://embodiedintimacy.webflow.io/

Webflow Preview
https://preview.webflow.com/preview/embodiedintimacy?preview=f1dab16c0d03bee91540ded0f0e9fe4f

Appreciatively,

  • Derek

PS. I’d love to know how and why such issues come up out of nowhere - this has been a rabbit hole and timesuck, like so many other inexplicable issues within the design environment :frowning:

@CyberDave,
X-ray mode to the rescue. I figured it out. Nothing had changed with the Header Nav element - it was a random change to a div containing a slider, and it’s overflow wasn’t “off”. Problem solved, though still confused as to the sudden cause.

Thanks Anyhow.

  • D
1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.