13.11.2025 | Peter Gerken

Scroll offset respecting sticky elements (here: gin toolbar)

For fixed headers

base.css

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(70px + var(--gin-toolbar-secondary-height, 0px)) !important;
}
@media (min-width: 767px) {
  html {
    scroll-padding-top: calc(135px + var(--gin-toolbar-secondary-height, 0px)) !important;
  }
}

Issue:

If you set an anchor link and let the browser scroll there, by default it scrolls to position 0 on the y angle, placing the content to which was scrolled exactly at the top of the browser's viewport. But if the website uses a sticky header which is also placed on top of the viewport, this actual content to which was scrolled might not be visible, since the sticky header overlaps it.

Solution:

Use the CSS property proposed in the snipped. It sets an offset when the browser triggers the scrolling action and allows to take the height of sticky headers or sticky toolbars into account.

css

Zurück zur DevBit-Übersicht

Weitere DevBits

06.08.2026 | Lothar Ferreira Neumann

Change custom text field sizes in Gin Backend Theme using Asset Injector

To alter the node ID field (nid) of our content view we add this to the file:

asset_injector.css.gin.yml

/* Views exposed filter: appropriate field widths */
.views-exposed-form #edit-nid {
  max-width: 10ch;
}

views

css

asset injection

Gin backend theme

fields

13.11.2025 | Holger Weischenberg

Check whether there is only one child item using CSS

.breadcrumb.scss

    .breadcrumb--item:only-child {
      svg {
        display: none;
      }
    }

breadcrumb

css

copy-paste