How to fix the Right hand Nav position while scrolling in XD?

[bytobyco]

Hi,

I'm very new to XD, I've designed website pages for a client in Illustrator & opened them into XD to show samples to a client. I was under the impression that I could fix elements whilst scrolling but I'm having no luck when I save out the page & view the link.

I'm wanting to fix the main nav to the right hand side of the page to show how it will work when viewing the site live to the client, the page will scroll & the nav will remain fixed to the righthand side. I've selected the elements & clicked 'Fix Position When Scrolling' but the nav is still fixed to the page/artboard & moving when I scroll to see the rest of the site & not staying in the position required.

Any help would be really appreciated!

<Title renamed by moderator>

[bytobyco]

Can anyone help with this, I'm on a tight deadline & would love to resolve this before sending links over!

Thanks in advance!

T

[HARSHIKA_VERMA]

Hi @bytobyco,

Greetings from the XD community!

I appreciate you contacting out. If I heard you right, you're trying to fix the position of the Nav bar while scrolling. If yes, please check this video: https://www.youtube.com/watch?v=1Kr2V67ZkN4&ab_channel=Monica%27sDesignProcess

Tell us if that was helpful.

I am also keeping the discussion for our expert's suggestions.

Thanks,

Harshika

[bytobyco]

Hi Harshika,

Thanks for coming back to me, I;ve been checking the box within the tutorial but nothing seems to happen. I;ve created the full length web page in Illustrator & opened it witin XD but when I preview it doesn't show a screen size, it just shows the entire artboard in the window & I wondered whether that might have something to do with it?

Thanks again for your help,

Toby

[bytobyco]

Hi Harshika,

I've tkaen a few steops back & work out what what happening, I needed to set up to the artboard corrctly first instead of directly opening up the Illustrator file. The scroll effect is now working on the right nav perfectly. However I do have a couple of elements that won't scroll in the fixed position. It is an outlined peice of text that I've imported, it will scroll woth the page no problem, however when I apply the 'Fix to position' is disappears on the preview?

Any thoughts?

Best,
Toby

[bytobyco · Accepted solution]

Hi All,

I found a fix for the disappearing 'Fix to position' on outlined imported shapes from Illustrator...

Just going to leave this here for the Community, importing files from Illustrator need to be left as is & not outlined files, this fixes the missing images when clicking & using the 'Fix to position' feature.

Best,
Toby