Problems with Hover and Active state on Navigation

  • jodword

    (@jodword)


    1 week ago

    Hello,
    I’m building a website locally on PC using the Local application using the Twenty Twenty Five theme in WordPress 7.0. I have my typography for links for the Initial state to be #000000 Black with no underline. I would like to have a Hover state which would be #AFA8BA also with no underline and an Active state to be #000066 with font weight bold and have an underline. I have gone to Appearance >Editor >Design >Styles >Typography >Links and entered the following CSS:

    /* Remove underlines from navigation links specifically */
    .wp-block-navigation .wp-block-navigation-item_content {
    text-decoration: none !important;
    }
    /* Add a hover color */
    .wp-block-navigation a:hover {
    color: #AFA8BA !important /* Hover color is gray */
    /* Add an active link style (e.g., bold or different color) */
    .current-menu-item > a {
    font-weight: bold;
    color: #000066; /* Active color is dark blue */
    text-decoration: underline; /* Optional: keep underline ONLY for active link

    I’m not getting the Hover state or the Active state. Any assistance would be greatly appreciated.

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Nagesh Pai

    (@nagpai)

    3 days, 22 hours ago

    The code you shared does not seem to have closing braces for the second and third rule.

    Try this code 

    .wp-block-navigation .wp-block-navigation-item_content {
    text-decoration: none !important;
    }

    .wp-block-navigation a:hover {
    color: #AFA8BA !important;
    text-decoration: none !important;
    }

    .current-menu-item > a {
    font-weight: bold;
    color: #000066;
    text-decoration: underline; 
    }
    Thread Starter jodword

    (@jodword)

    1 day, 17 hours ago

    Thanks Nagesh, I changed the CSS and am still running into problems. Only 2 links on the header show the current state page as text bold, blue and underlined. The rest of the header links show only initial state and hover. None of the footer show current state page as text bold, blue and underlined.

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

You must be logged in to reply to this topic.