Support » Theme: Twenty Twenty-One » How to change background color of clicked menu items?

  • Resolved akopacsi

    (@akopacsi)


    If you click on any menu or submenu item or link on a site with this theme, the clicked element’s background changes to white as long as you hold mouse button pushed. It’s not a hovering effect. It happens after you clicked on the menu item or link. Once you release the mouse button, the selection takes effect and you get redirected to the destination page.
    The white background is visible only while the mouse button is hold down.
    How can I change this color to something else? Or disable this behaviour?

    I selected a horrible yellow background color for the example site, so you can see the white background behind clicked items easily.

    https://www.akopacsi.com/?page_id=16

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @akopacsi – that’s the anchor link focus state, which is defined site-wide for most anchor links.

    To override its background colour site-wide as well, give this a try in Appearance > Customize > Additional CSS:

    .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background-color: #A2BAF5;
    }

    Replace the background colour with your preferred code.

    If you prefer to limit the colour change to the navigation menu only, you could use this version instead of the above:

    .site .primary-menu-container a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
      background-color: #A2BAF5;
    }

    Let me know how it goes!

    Thread Starter akopacsi

    (@akopacsi)

    It works perfectly. Thank you very much, Kathryn!

    Moderator Kathryn Presner

    (@zoonini)

    Glad to hear! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change background color of clicked menu items?’ is closed to new replies.