Contrib.social

Navbar sticky-top doesn't work out of the box

Open on Drupal.org →
Created on 13 April 2019, about 5 years ago
Updated 15 June 2023, about 1 year ago

By default in page.html.twig, Barrio place the header regions inside <header> tags.
However, one of the available component settings for navbar is sticky-top Bootstrap class, which assign position: sticky

This does not directly result in navbar that is sticky on top, because the header region contains only the sticky components, which get scrolled along with the rest of the page (a nice summary about the layout is in this medium post).

My workaround is commenting out the <header> tags encapsulating the header region, afterwards the sticky-top class works.

Some possible workarounds:

  • Eliminate the <header> encapsulating tags entirely in page.html.twig, but could be bad for UI design concept especially screen readers (?)
  • Provide configuration hooks that assign class sticky-top to the header-region too when setting to one of the child element inside the header is sticky-top. But this can break the region as non-sticky-top children are also becoming sticky-top
💬 Support request
Status

Closed: won't fix

Version

4.22

Component

User interface

Created by

therealbene

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 1 year ago →
    terminator727

    So far, I've found that nothing seems to work with the latest versions of the Bootstrap 5 Barrio theme and Drupal 10. Here's what I've done up to this point:

    I installed the latest versions of Drupal (10) and the Bootstrap 5 Barrio theme.
    I attempted to fix the "sticky-top" issue using various approaches, including commenting out the tags that encapsulate the header region and adding sticky-top to the header region through configuration hooks. Unfortunately, these methods have not resolved the issue​1​.
    Another approach I tried was to add a function in my my_theme.theme file that checks the navbar's position and, if necessary, sets it to sticky-top. Despite this, the issue persists​1​.

    I'm currently looking for further solutions and would greatly appreciate any help. Please let me know if you have any suggestions.

  • Comment about 1 year ago →
    terminator727

    Ok solved,
    https://www.drupal.org/docs/8/themes/barrio-bootstrap-4-drupal-89-theme/... →

    here is the patch:
    https://www.drupal.org/project/bootstrap_sass/issues/3337961 💬 JS error with affix Active

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024