Contrib.social

Feedback on the CSS-controlled offset feature

Open on Drupal.org →
Created on 23 April 2025, about 1 month ago

Problem/Motivation

We have updated to 3.2.0-rc1 and we can confirm that the setting a default offset on the UI...

In a wide viewport

We have used the default CSS...

:root {
  --toc-scroll-offset: 4.6rem;
}

Seems to work as exactly as expected...

Going mobile

However, when we make adjustments in our breakpoint variant CSS for narrow mobile views...

@media (max-width: 992px) {
  :root {
    --toc-scroll-offset: 7rem;
  }
}

(In this case, any viewports 992 or smaller)

This does not seem to have any effect; the offset is still the same as the default...

Whacking up the breakpoint variant CSS to --toc-scroll-offset: 7rem; makes no difference at all to the behaviour?

We have tried adding !important to the breakpoint variant CSS but to no effect.

We are not sure quite how to debug this since we don't think that the offset appears in the manifest CSS and is probably JS-controlled?

What should we try next?

If it is helpful to do so, we can easily push this all live so that others can help debug.

💬 Support request
Status

Active

Version

3.2

Component

User interface

Created by

🇬🇧United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @SirClickALot
  • Comment about 1 month ago →
    🇬🇧United Kingdom SirClickALot Somerset
  • Comment about 1 month ago →
    🇫🇷France mably

    Hi @sirclickalot, if you give me an url, I'll have a look at it.

    The CSS variable definition part is still not in production on our side yet.

  • Comment about 1 month ago →
    🇬🇧United Kingdom SirClickALot Somerset

    I take it all back.

    The block for the mobile version of the menu was a separate one and we had not added the revised setting for: 'Scroll offset' to one based on CSS variable - Doh!

    However, we have pushed everything live anyway as there is actually another connected issue that we might somehow be able to improve on through further dialogue.

    Here is the page: https://bit-by-bit.org/tutorials/boolean-logic-introduction

    To witness this 'extra', ...

    1. Refresh the page and ensure that you are at the top.
    2. Switch to (say) 900px
    3. Click LEARN - all good.
    4. Click LEARN again

    As you will see, the subsequent click doesn't give quite the desired results because the ToC.js block itself is 'Sticky' controlled via the Sticky module → .

    I suspect that there may not be anything we can do about as the block and JS controlling are separate concerns but we thought we might just flag it up.

  • Comment about 1 month ago →
    🇫🇷France mably

    Hi @sirclickalot, happy to see that your original problem is fixed.

    May be you could create another issue for the dynamic resize handling without having to reload the page?

  • Comment about 1 month ago →
    🇫🇷France mably

    We finally had the CSS variable offset feature deployed in production for the new Bordeaux City website: https://www.bordeaux.fr/

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024