Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent skip links from overlapping header #30897

Merged
merged 1 commit into from
Jul 13, 2020
Merged

Conversation

ffoodd
Copy link
Member

@ffoodd ffoodd commented May 26, 2020

Here it is, after #30073 discussions: I got back the kind of banner that appeared previously, only aligning skip-links to the left.

As a bonus (feel free to discuss it, of course), I enhanced progressively the whole thing by making all skip links appear together when :focus is within the container.

And to stay consistent with #30866 I used utilities, seems legit in that case.

Preview: https://deploy-preview-30897--twbs-bootstrap.netlify.app/

Fixes #30491

@XhmikosR
Copy link
Member

Will this solution work for the supported browsers in v4-dev too? Because IE is supported in v4-dev.

@ffoodd
Copy link
Member Author

ffoodd commented May 26, 2020

Yes it will, it'll simply work as it did previously: displaying links one by one, at the same place.

IE11 and other unsupporting browsers will simply ignore the :focus-within rule.

@XhmikosR
Copy link
Member

OK, cool, then I'll wait for the other to have a look and if this lands, I'm going to backport it to v4-dev.

@mdo mdo changed the base branch from master to main June 16, 2020 19:34
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@XhmikosR XhmikosR force-pushed the master-fod-skiplinks-theming branch from 0d80974 to b5ba395 Compare July 13, 2020 18:59
@mdo mdo merged commit cb1eee1 into main Jul 13, 2020
@mdo mdo deleted the master-fod-skiplinks-theming branch July 13, 2020 19:36
@XhmikosR
Copy link
Member

@ffoodd can you backport this and the previous skip links PR if it applies to v4-dev? We have it in the v4-dev-next project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Review skip links theming
3 participants