Dotted Lines on Menu

[ad_1]

I cannot, for the life of me figure out how to remove these dotted lines around my menu that appear when I click each link. I’ve tried adding all of the code snippets I could find to the additional CSS part of the customizer but no luck. I’m using Astra. Any help would be greatly appreciated!

[ad_2]
3 Comments
  1. You need to add this CSS to the <a> element:
    outline: none

    The dotted line is for accessibility when using keyboard navigation. Users can see which link is currently selected.

  2. This is likely the [Outline](https://www.w3schools.com/css/css_outline.asp) CSS property, and is a useful accessibility feature (as well as default functionality). It is likely only showing whilst the element is in focus (i.e. you’ve used the ‘tab’ key on your keyboard to move between links/elements on the screen).

    What happens if you click in an empty part of the page? The outline should disappear.

    If you do decide to remove it then you probably need to target the [‘:focus’ psuedo-class](https://www.w3schools.com/CSSref/sel_focus.php), but you should make sure there’s something in its place otherwise you’re reducing how accessible your website is to people only using a keyboard to navigate the web.

  3. that doesn’t look like the outline, the cursor is somewhere else. Post your website’s URL, otherwise it’s impossible to know, but I’m quite sure it’s a `border` with `dotted` property

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer