Highlight the current page in the menu items on a WordPress site

Pinegrow WP
, , ,
1

Hello all,
I have built a Wordpress site with a few pages. I am using Blocks for everything. From the menu to the footer. Everything are blocks.
I still have not figured out, in the menu, how to highlight the current page in the menu items.
I am using tailwind CSS.

Any hint?

Thanks

2

Hi,

Did you use a WordPress menu? If yes then it adds this class (current-menu-item) to the menu item when it is the current page. You can style that class.

1 Like
3

Hey Thank you,
so yes, I am using the Menu - Smart wordpress action.

This should be my style for the active menu item.

.current-menu-item {
    color: red; 
    font-weight: bold; 
}

But since I am using Tailwind CSS… I created a new css file “dunecss.css” and loaded inside my style wp header block.

Result: it partially works! Wordpress applies the font-weight: bold; but not the color property.
I am guessing this is related to some tailwind css style thing.

Screenshot 2023-06-14 at 14.26.29
Screenshot 2023-06-14 at 14.26.29736Ă—966 199 KB

UPDATE.

If i use the important ! css rule with the color property then it will work. font-weight: bold! important;

Maybe there is another way to get the style to work. I really like Tailwind CSS though it adds and extra thing to handle.

Thanks

1 Like
4

Hi @red-rosefields

Great! Glad you got it too work. I don’t use Tailwind so could not be of any help there :wink:

1 Like