I’m working on a lofi prototype that has a simple navigation bar fixed at the bottom of the screen with scroll-able menu options above it. I’ve noticed in the preview that when the scrolling menu items are behind the navigation bar, the items can still be selected even though the nav bar is covering them from view. This makes it difficult to select objects on the nav bar and doesn’t sync up with what the real product would be like.
How can I prevent these items from triggering when they’re behind the fixed elements?
Best answer by Haroll
Hi @Edyn_McCarty
You can use Auto-layout and clip content so your content won’t be available when not displayed
view is an auto-layout with a vertical layout
nav and content are inside view
content’s height is set to fill (take all the height available)
and nav rest at the bottom having a height set to hug (take what needed)
select content and from design panel : check clip content
then from prototype panel set overflow to vertical
as shown on the image below, when launching the prototype, clickable section from content do not overlaps with nav
Hi @Edyn_McCarty
You can use Auto-layout and clip content so your content won’t be available when not displayed
view is an auto-layout with a vertical layout
nav and content are inside view
content’s height is set to fill (take all the height available)
and nav rest at the bottom having a height set to hug (take what needed)
select content and from design panel : check clip content
then from prototype panel set overflow to vertical
as shown on the image below, when launching the prototype, clickable section from content do not overlaps with nav
When I have to work on long-scrolling view like that I do make the content a component and use a instance of it into my prototype view so I’m able to edit anything in the component and see change live on the prototype
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
