Scroll to brick


Is it possible to configure a navigation element to scroll to a brick, not a block? My contact block has 2 columns (left contact form, right embedded Google Map) and my site contains a link to the map. I have added an ID to the block (named contact, because both element display side by side) and the scroll works fine in desktop. On smaller devices, the layout stacks the bricks vertically and the navigation link only scrolls as far as the form. I could switch the brick order, but the same problem would occur when clicking on a contact link.

I have added an ID to the map brick container, but it doesn’t appear in the interactions target list when I try to configure the scroll to link (at least it doesn’t when I tried. I could be doing something wrong)…

Many thanks

You could change the order of the columns, or duplicate the bloc and change things round in the duplicate. You can then use visibility options to ensure the correct bloc displays on the relevant device.

Thanks, I’ll give it a try.

Here is the easiest way to do it:

On a mobile breakpoint, the above arrangement will display the image ABOVE the text. If you wanted the text to display first, switch to the mobile breakpoint and change the order as shown below.

1 Like

Just noticed, there may be a bug in blocs that prevents this from working correctly in a published site. Better let @norm know. When published, the order of columns doesn’t change, regardless of how the order is set inside the blocs project. So, as an interim measure, best to use the duplicate bloc and visibility options to achieve the result you need.

Edit: Forgot to mention - you should duplicate the ROW not the bloc. This will keep the two variants of your content in the same bloc. This allows you to use the same bloc ID for your scroll to target option. Make the first ROW visible on LG and MD breakpoints only, and the second ROW visible on SM and XS breakpoints only. Here are some images to guide you.

If you wanted to have a situation as described in your first post, you could use the Structure Group 2 Bloc.

Screenshot 2020-07-08 at 18.22.26
This allows you to create a bloc id for each bloc even though they are displayed side by side. One bloc would contain your contact form, the other your map. You could then set up scroll to links for both blocs.

1 Like

Thanks for all your help.