How to setup different onepage menu #targets for

[salilou]

Hi,
I build a website with an onepage start page, that should slightly differently on desktop or mobile screens.
It has 5 sections, each with an image and a text besides or beneath.

DESKTOP
Section 1 (galerie): slider
Section 2 (team): image + text
Section 3 (leistungen): text + image
Section 4 (hinweise): image + text
Section 5 (kontakt): text + image

MOBILE
Section 1 (galerie): slider
Section 2 (team): text + image !difference!
Section 3 (leistungen): text + image
Section 4 (hinweise): text + image !difference!
Section 5 (kontakt): text + image

To get this, I did set up section 2 and 4 in Cornerstone twice and let it display on desktop or mobile screens.
But now the on page navigation does not work any more.
It seems that cornerstone does not accept, when I set an id twice.
For example: id for Section 2 is “team”, on desktop and on mobile.

How would you solve this?

Thank you,
Hannes

[rad]

Hi @salilou,

Thanks for reaching out.

You can only use ID once since it’s unique identification, it’s also a browser or HTML standard. Javascript will not work since it’s expecting a single ID. The solution is grouping your content on single ID, example

Section 1 (galerie)
Row 1 Desktop : slider
Row 2 Mobile : slider

Section 2 (team)
Row 1 Desktop : image + text
Row 2 Mobile : image + text

And so on, you can use Hide during breakpoints on rows to the same as how you control it in the section.

Thanks!

[salilou]

That easy! Thank you very much!

[friech]

We are delighted to assist you with this.

Cheers!