Fix Wordpress OceanWP Focus Border Visible After Click

One common issue that users encounter when using the OceanWP theme in Wordpress is the visibility of the focus border after clicking on a link. This focus border can be distracting and interfere with the overall design of the website. Fortunately, this problem can be easily resolved with a simple CSS tweak.

The Problem

By default, when you click on a link in the OceanWP theme, a focus border is applied to indicate that the link is currently active. However, this focus border can remain visible even after the click, which is not desired for most websites.

The Solution

To fix this issue and ensure that the focus border disappears after clicking on a link, you can use the following CSS code snippet:

1
2
3

a:focus {
    outline: none !important;
}

By applying this code, you remove the outline property from the link when it receives focus, effectively hiding the focus border.

Implementation

To implement this solution, follow these steps:

1. Log in to your Wordpress admin panel.
2. Navigate to the “Appearance” section and click on “Customize” to open the theme customization options.
3. In the customization sidebar, locate and click on “Additional CSS” to open the CSS editor.
4. Copy the CSS code snippet provided above and paste it into the CSS editor.
5. Click on the “Publish” button to save your changes.

Once you have completed these steps, the focus border will no longer be visible after clicking on a link within your OceanWP-powered Wordpress website.

Conclusion

By applying the CSS code snippet mentioned above, you can easily resolve the issue of the focus border remaining visible after clicking on a link in the OceanWP theme. This simple solution enhances the user experience and ensures a cleaner design for your website.