How to remove "skip to content" in Rebel Theme

Store Design
,
1

Hi,

Does anyone know how to remove the Skip to content or skip to result list prompt?

image
image1538Ă—1165 150 KB

2

You can add this code to Custom CSS in Theme settings to remove those buttons

.skip-to-content-link.button-secondary { display: none !important; visibility: hidden !important; }
Best regards,

Dan from Ryviu: Product Reviews App

3

Thank you for responding!
Unfortunately, i tried to add this code and still it appears on the website.

4

@Wellanie Did you place that code in Theme.css?

5

This is a useful tool for accessibility needs. I wouldn’t hide it. Rather, I would check the theme code to see if it uses the newer -visible…

Search in the code editor for: .skip-to-content-link:focus

Just change the :focus to :focus-visible

This tells the browser to only show it if the navigation is actually using the keyboard. i.e. tab triggers it, mouse does not.

1 Like
6

Can I know where di you add the code?

7

i added it in Custom CSS in Edit Themes

1 Like
8

Hey @Wellanie Welcome to Shopify Community can you please share the Website URL

9

pw: mastew

1 Like
10

Hey @Wellanie try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
a.skip-to-content-link.button-secondary {
    display: none !important;
}
</style>

image
image1279Ă—858 260 KB

11

This one worked, thanks!

12

Hey @Wellanie Thanks for your response if you have any other query feel free to share it

1 Like
13

:bomb: Skip to content is an ACCESSIBILITY feature for LOW OR NO VISION USERS!!!

@Wellanie the accepted solution just breaks the website further.
DO NOT USE display:none; to gut Skip-to-content(STC) it’s an important feature for a reason.
Fix VISIBILITY of the element don’t impair the STC for screen reader users; example code to find below.
Don’t design slap things in to alienate 25% of the entire human population with low or no vision.

Sigh, gd don’t outright remove, “fix” , such things in worse ways without stepping back to know WHY it’s there in the first place, or diagnosing WHAT caused it to break and no longer be invisible by default kicking an irresponsible can down the road.

And you can be setting up an easy mode ADA lawsuit claim against your client by legal trolls from not putting in just tad more effort; it doesn’t matter if the trolls basis is nonsense they’ll use it as a welcome mat to find more bad accessibility practices

Not to mention if the STC wasn’t showing before then suddenly was that indicates something somewhere was changed for the worse and likely also other things are broken whether it be code or someone’s business process for mishandling accessibility features.:bug: :dragon: bugs and dragons be here.

The STC should only be visible if a user actively tabs to it; gives it focus , otherwise invisible*.
That’s the issue to fix.
If you load the page and TAB into the page the "Skip to content’ should be the first thing to reveal itself.
If it doesn’t reveal itself you’ve BROKEN the website not fixed it.
Meaning it needs to be no visibility but still present that simple screens readers find it.

Don’t muck with this or try to be clever with it.
Don’t just gut things in themes without understanding WHY it’s there in the first place.
Or reach for the first thing that seems to work because your a sight enabled person.

There should be code that looks like the below to make it invisible* or some such that will vary by theme.

*note how I am actively avoiding saying “hidden” or remove etc in regards to display, display: none can make it so screen readers don’t find it.

.skip-to-content-link {
  clip-path: inset(100% 100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-to-content-link:focus {
  transform: translateY(0); /* Visible on keyboard focus */
}

Ridiculous thread, shame on contributors in this thread passing “quick” fixes to get points, except @Maximus3 being a real G pointing out the real problem and common fix :glasses::clap: .
The real super pathetic part is even most good LLMs know better than slap on display:none for this

I’m just plain disgusted, do better.

1 Like
14

@Wellanie

@PaulNewton makes a solid point. Knowingly hiding the STC is low hanging fruit for hungry lawyers who prey on Shopify stores. You’re just making this store an easy target. If it broke somehow you should fix it right.