Skip link no longer hidden

  • Resolved tristanmason

    (@tristanmason)


    2 years ago

    Hi, after updating to v1.2.2, the skip link became visible even when not focused. I had to add the following CSS to hide it again:

    .skip-link:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

    It must have been a while since I last updated.
    I saw that a commit was made back in March which made changes:
    https://github.com/understrap/understrap/commit/c00c4003dbeac09debcf4a33f35b335b3cdb45d3

    It extended the .visually-hidden-focusable class to .skip-link, which should have done basically the same thing I did in the CSS above. If you haven’t seen this problem pop up on any other sites, I’m wondering if maybe I messed while trying to slim down bootstrap’s CSS? Any ideas?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Howard Development & Consulting

    (@howarddc)

    Essentially the sr-only classes were in Bootstrap 4 but in Bootstrap 5 they were replaced with the visually-hidden classes. However, because Understrap by default includes Font Awesome’s CSS, which includes .sr-only, the sr-only classes were actually still working when using Bootstrap 5.

    But if you’re using a child theme on BS5 and have Font Awesome disabled, you’ll want to bring back that missing CSS

    Thread Starter tristanmason

    (@tristanmason)

    @howarddc Ah yes, I did have FontAwesome disabled. Thanks for this!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Skip link no longer hidden’ is closed to new replies.