Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Black Border Around Navigation


Recommended Posts

2 hours ago, jadejohnsonillo said:

When I click around the navigation links, a black border pops up. Does anyone know how to get rid of it?

This is a "focus outline" and it appears when you move around the site using the keyboard. It is an essential navigation tool for visitors with vision and movement disabilities so please don't try to disable it.

The contrasting black outline is added to the area of the page that has focus. Removing focus outlines can create issues for people navigating the web with a keyboard, and isn't recommended. In some territories, there are legal stipulations for accessibility so removing accessibility features may cause legal issues for the website owner.

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
18 hours ago, paul2009 said:

This is a "focus outline" and it appears when you move around the site using the keyboard. It is an essential navigation tool for visitors with vision and movement disabilities so please don't try to disable it.

The contrasting black outline is added to the area of the page that has focus. Removing focus outlines can create issues for people navigating the web with a keyboard, and isn't recommended. In some territories, there are legal stipulations for accessibility so removing accessibility features may cause legal issues for the website owner.

This is new to me, can you explain why it's showing up now but wasn't before? And why it shows up when I click with my mouse and not my keyboard?

I don't mind there being an accessibility feature, though it's strange that I can't replicate it on anyone else's Squarespace site.

Link to comment
On 7/11/2022 at 7:01 PM, lizasem said:

I'm having a hard time figuring out the class to turn off the outline on the nav when that area is clicked.

The border is usually due to accessibility features. I don't see this when I view your site using Safari, so it is likely others are not seeing it either. I recommend you check the following:

Are you using the latest version of Safari (version 15.5)?

Have you enabled accessibility features so that the border appears?

There have been a number of posts about it this week, so if you still experience the issue it could also be due to a technical fault ("bug"). I recommend that you report it directly to Squarespace Customer Care to see if they can help.

Edited by paul2009

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
On 7/11/2022 at 3:10 PM, Wolfsilon said:

Hi there,

I just checked on Safari and didn't see any outline on the Nav.

Did you solve the problem?

On 7/12/2022 at 12:19 PM, paul2009 said:

The border is usually due to accessibility features, although I don't see it when I view your site. 

I can still see the border when I click my navigation, and on @lizasem's site too.

Weird that other people can't see it, and that it's only shown in Safari. Is this a setting that I can turn off for myself, not for my site?

Link to comment

I have been having same problem with my site's header and scrolling text for the past few days.

By tapping header or scrolling text, a strange border appears around it.

This problem occurs when using mobile browser like iOS safari.

Edited by Hirotada
Link to comment
7 hours ago, Hirotada said:

I have been having same problem with my site's header and scrolling text for the past few days.

By tapping header or scrolling text, a strange border appears around it.

This problem occurs when using mobile browser like iOS safari.

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I don't know for sure but I've seen several similar posts on this issue and I've had it happen to me a couple of times. The issue appears to be accessibility features being activated for some reason. I had it happen to me a couple of days back and when I reloaded the page, the issue was gone. I was unable to trigger it again on purpose. This could be an SS issue or it might even be a browser issue. I'm on Chrome (latest)/macOS.

Not much help I know but the more data we can gather the better a chance for a solution. 🙂

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...