Header Menu > Main Styling > “Link colour” > Unwanted border / stroke

  • Resolved quoox

    (@quoox)


    1 year, 2 months ago

    Hello everybody,

    I am new to this forum and WordPress in general, so I hope this is the right place to ask. I did not find an answer that worked for me in the documentation / this forum / via Google.

    I am struggling with the mobile menu of my website (using OcenWP), which behaves in a different way than I want it to. (;

    My problem:

    When mobile users click the hamburger menu, a border / stroke appears, which I would not like to have.

    After some investigation, I found out that the colour of this border / stroke can be changed in menu Header > Menu > “Link colour”.

    Unfortunately, this also affects the colour of my menu item “Menü”, therefore, I cannot just set this value to White / transparent.

    Screenshots:

    • When clicking the hamburger menu, borders appear (in Screenshot Purple)
    • Text “Menü” is affected by change of colour value “Link colour”, which I do not want to change

    Request:

    • Could somebody please let me know if there is a setting, where I can just remove the border or just change the color of the border to White (without changing it for the menu items aswell)?
    • As I understood, once can also add custom CSS, so in case somebody could help me create a code snippet to fix my issue, that would also be helpful.

    Thank you in advance!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @quoox,

    Welcome to the forum. We are here to provide support for the OceanWP product.

    Regarding the issue you raised, actually, the outline is not an issue. It’s an accessibility requirement (we’re required to use it). But you can disable it on your end with custom CSS. To remove the outline, please add the following CSS code in the Custom CSS area in the Customizer:

    a:focus {
    outline: 0px !important;
    outline: none !important;
}

    Please read this link about the CSS code on the Customizer:
    https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website

    For more information about Accessibility, please read this article: https://developer.mozilla.org/en-US/docs/Web/Accessibility.

    Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes.

    I hope it helps.

    If you have any questions or issues related to OceanWP, feel free to ask and we will do our best to assist you.

    Best Regards

    Thread Starter quoox

    (@quoox)

    Dear @skalanter,

    Thank you so much for the extensive answer and your help with my issue.

    Your solution worked and my issue is resolved! (:

    You’re very welcome. I’m glad we could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Menu > Main Styling > “Link colour” > Unwanted border / stroke’ is closed to new replies.