Borders in the menu on WordPress 6.5

Hi there,

This is an accessibility feature for when the state element is set to focus.

You can change it with a CSS like that:

:where(.wp-site-blocks *:focus) {
    outline-width: inherit;
    outline-style: inherit;
}

You can add this CSS by going to the Site Editor, then Styles. There you can click on the three-dot icon (kebab menu), and go to Additional CSS:

Full Size: https://d.pr/i/Yox1tm

I would recommend to keep it or add a different way to highlight that the element was selected.

I tried making the hypertext on hover, gold in color. Unfortunately it remains black. With the black button active, the text disappears, as it is also black.

/* Active menu button */
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: black;
  border-radius: 30px;
  padding: 10px;
  outline-width: inherit;
  outline-style: inherit;
}

/* Menu text active on mouse hover */
.wp-block-navigation__responsive-container-open.always-shown:hover:target {
  color: #675a00 !important;
}

View post on imgur.com

View post on imgur.com

View post on imgur.com

At the moment I have little or no traffic on the site. Do you think it’s essential that I focus on accessibility? How do I improve it? I think the accessibility of my site is acceptable, but if you say it’s not, then I’m going to work on it.

That particular border/feature is specifically for Accessibility in the theme – and was added in due diligence by the developers of the theme.

It’s really your decision about whether you’d like to change that more. However, given it is a feature designed for accessibility – it’s not a change we can offer further support for in this thread.

Best of luck with it!