On the top pallet for https://pideja.ca/, there is the site logo, to the left and the site name in the center. When hovering or clicking on either one, a white border line appears! Also, at the same time, the MENU button blinks and reverts momentarily to the hamburger icon.
I have looked everywhere: CSS, PHP, and Backlight settings to no avail.
Any ideas on how to set this up?
That dotted line is from the browser. I think it outlines the size of the link and apparently it’s an accessibility feature. A Google search found this:
https://www.tutorialrepublic.com/faq/how-to-remove-dotted-line-around-links-using-css.php
The hamburger icon appears because clicking on the link refreshes the page so the original icon appears before the customization you made.
a, a:active, a:focus{
outline:none !important;
}
It works! Thanks Rod
Yeah, but is absolute terrible. Outlines are an important accessibility feature, and by not providing accessibility considerations for your website, you may actually be in violation of the law, opening yourself to the possibility of lawsuits because your website is not accessible.
You do you, but read this and try to make an informed decision.
I see the point. Found this:
a:hover,a:active {outline: none;}
It kills the outline when using the mouse but maintains it using the keyboard.