Problems with Hover and Active state on Navigation

jodword
(@jodword)

4 weeks 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 7 replies - 1 through 7 (of 7 total)

Nagesh Pai
(@nagpai)

3 weeks, 4 days 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)

3 weeks, 1 day 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.

Thread Starter jodword
(@jodword)

1 week, 1 day ago

Just did a test on the Active state CSS by changing the color from blue to a bright green and still as above, only the Initial and Hover are working and the 2 that are working for Active are bold and underlined, but black, no matter what color I choose.

Nagesh Pai
(@nagpai)

5 days, 9 hours ago

You may want to check the browser inspector to see what CSS Rule is overriding those specific elements where you are not seeing your changes taking affect. Try adding specific rules to those elements. This is however outside the scope of Twenty Twenty-five theme, and enters the realms of CSS editing.

Thread Starter jodword
(@jodword)

5 days, 7 hours ago

Thanks. Do you know what theme similar to Twenty Twenty Five that I am not going to have so many problems? I thought the whole idea behind WordPress would be no coding.

Thread Starter jodword
(@jodword)

4 days, 19 hours ago

Where do I go to see how to see how the the header and footer styles are listed to possibly add to my additional css to make it more important/higher specificity?

Nagesh Pai
(@nagpai)

4 days, 8 hours ago

You need to use the browser inspector tool. Here is a tutorial from Google Chrome

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

You must be logged in to reply to this topic.

Tags