Scrolling website

[letsgofishing]

I've now spent over a day trying to get this to work...
I want a scrolling website and as advised in another thread, instead of having all the "sections" on 1 very long page, I split them up into into individual pages and have put a header panel and menu at the top of each page.
When I preview the entire site, the menu doesn't work and if I scroll down the site, I can see a white space at the top of each page where the header panel/menu should go.
If I preview a single page, the menu works.
Can the experts please advise....

[Acorn]

LGF, you were using a Sticky NavBar so you do not repeat these on each page, just the first.

Acorn

[Boy]

Can you upload the .xar/.web file?

[letsgofishing]

LGF, you were using a Sticky NavBar so you do not repeat these on each page, just the first.

Acorn

Thanks Acorn - will try that first

[siran]

You might have to modify the navbar because otherwise the home button will be disabled at the first page.
And you might need some CSS to force the navbar being visible (see site head code in the example).
There is a space between pages option you might want to set to zero.

[letsgofishing]

I'm going mad - menu works but doesn't stick - neither does the "up" button (which I tried linking to the menu icon)...
...have taken out the gallery and videos to make the file smaller.
All help much appreciated!
(no publishing details included this time).

[Egg Bramhill]

Just on my way out LGF but quickly stop your headers & menu from being sticky.
They are set to repeating on the index page. Cancel that.
Allow 109px at top of each page to fit the header/menu.
Then set the index header/menu's to repeating.

[Acorn]

You might have to modify the navbar because otherwise the home button will be disabled at the first page.
And you might need some CSS to force the navbar being visible (see site head code in the example).
There is a space between pages option you might want to set to zero.

siran, first page solution I would use is just Link to <Top of Page>.

I have a working solution that uses no CSS code.
It is a juggle between placing Sticky objects that are separate from each other so one does not obscure any other at any point.

I'm going mad - menu works but doesn't stick - neither does the "up" button (which I tried linking to the menu icon)...
...have taken out the gallery and videos to make the file smaller.
All help much appreciated!
(no publishing details included this time).

I have used and changed siran's example (now with with no code).

We have a NavBar (or Hamburger one) that is Sticky and Repeats on all pages.
If you drive just that then you see just one NavBar across all pages.

The second you have a touching Stretch object under the NavBar (again repeating), it fails after 50% down on the first page as the NavBar hides under the Stretch object.
In the demo, I have done this with two Stretch repeating objects that just underlap the NavBar; on subsequent pages the underlap becomes an overlap. They are fill Anti-flash White.

I then have two repeating but not stretching boxes to fill in the gaps. These are Azure Mist.

To make a functioning sticking NavBar with a stretch box underneath, all four boxes would be sizes to the NavBar edges and made the same colour.

The Top of Page icon is easy to Stick and Repeat as there is nothing repeating under it.

Supersite Navbar (Acorned).xar

It will also work for a Horizontal Scrolling website. You would change the symbol to a left-pointing arrow.
It also works for Transition websites. You would change the <Top of Page> Link to page: index in both the NavBar and the ToP symbol.

Acorn

[Initiostar]

LGF,

I can see you have reverted to multiple pages - taking up Egg's suggestion if you are going to stay with supersite scrolling, then have one non-sticky copy of your header and headline links (also non-sticky). Change the up arrow to have a link to the index page and repeat on all pages (it must be non-sticky!!). You can add some additional up arrows to sections on a page (which are themselves part of a page).

640 wide_test_StfW_640_uparrow_link_to-index.xar

Now all up arrows return you to the index page and menu.

Your Home links are directing the visitor to PDFs (which open in separate windows), but on a mobile, the visitor will have go backwards unless the PDF itself has a link back to your full URL. All a bit messy, would be better to re-orientate the content to fit an embedded mobile slider.

For the purpose of visualising all this on a mobile, change Scale-to-fit-Width to 640px (from 1280px); otherwise anyone looking at this on a desktop will see the whole thing much larger than it will be in practice.

Gary

BTW; you could also create simple set of the links at the top of your first page that scroll out of view and back into view by returning to top of page (on a single page site) or to the index page for multiple pages - no Xara Navbar anywhere :-)

https://initiostar.co.uk/demo/menu/

[letsgofishing]

THANK YOU SO MUCH Siran, Egg, Acorn and Initiostar!
I really appreciate the amount of time you take to help me out and apologise for getting myself (the file) into such a mess.
I will take some time out to loo at the various solutions you have offered.
Many thanks,
Mike