Skip to main content
Question

Struggling with nested navigation on a page - totally stuck!

  • November 26, 2024
  • 2 replies
  • 25 views

John50

Hi there,

I’m new to Figma (just 2 weeks in!) and working on a learning project with basic navigation and responsiveness. The project has three responsive pages—Home, About, and Content—set up as frames, with navigation handled by a main nav component. So far, so good!

The issue arises with a “News” section I added to the homepage. My goal is to create an interactive block on the homepage where users can click through three news items (News 1, News 2, and News 3). I set up these news items as components and created a navigation component with buttons linking to each.

When I test the news component on its own, everything works perfectly. However, when I embed it on the homepage and view the prototype, the main homepage navigation (e.g., About and Content) stops working after interacting with a news item.

I’ve used the “Open overlay” action to position the news elements, as navigating directly to them opens them outside the homepage frame—which defeats the purpose.

I’ve linked my Figma file below (it should be publicly accessible) and also dropped a screenshot here:

Any advice would be greatly appreciated - I’m really stuck!

Thanks in advance!

2 replies

Nellya
  • Power Member
  • 485 replies
  • November 26, 2024

Hi. It’s better not to use overlay in this case, make an interactive component instead.
Also, you don’t need so many news components, only one is enough.

Here is the video (couldn’t upload it here because of size limit) → Dropbox


John50
  • Author
  • 1 reply
  • November 26, 2024

Thank you so much Nellya!! I’ve been so frustrated with this! This makes perfect sense 🙂


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings