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

**URL:** <https://forum.pinegrow.com/t/highlight-the-current-page-in-the-menu-items-on-a-wordpress-site/8151>\
**Category:** Pinegrow WP\
**Tags:** css, wordpress, blocks, tailwind\
**Created:** [June 14, 2023, 10:41am UTC](https://forum.pinegrow.com/t/highlight-the-current-page-in-the-menu-items-on-a-wordpress-site/8151 "2023-06-14T10:41:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [June 14, 2023, 10:41am UTC](https://forum.pinegrow.com/t/highlight-the-current-page-in-the-menu-items-on-a-wordpress-site/8151/1 "2023-06-14T10:41:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [June 14, 2023, 11:35am UTC](https://forum.pinegrow.com/t/highlight-the-current-page-in-the-menu-items-on-a-wordpress-site/8151/2 "2023-06-14T11:35:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [June 14, 2023, 12:34pm UTC](https://forum.pinegrow.com/t/highlight-the-current-page-in-the-menu-items-on-a-wordpress-site/8151/3 "2023-06-14T12:34:18Z")

</div>

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

This should be my style for the active menu item.

```auto
.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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/249949cbfa56cd23fbd9732fd7995174fc1b9229.png)

**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

---

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [June 14, 2023, 2:00pm UTC](https://forum.pinegrow.com/t/highlight-the-current-page-in-the-menu-items-on-a-wordpress-site/8151/4 "2023-06-14T14:00:18Z")

</div>

Hi @red-rosefields

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