Title: highlight active menu
Last modified: December 24, 2017

---

# highlight active menu

 *  Resolved [nissa1982](https://wordpress.org/support/users/nissa1982/)
 * (@nissa1982)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/highlight-active-menu/)
 * Who could help me with my active menu item.
 * The way my website is now, I don´t know where I am on the site, since the active
   menu item of the page I´m visiting isn´t highlighted to make it different from
   the non active menu items. Now, it only is highlighted when hovering the item.
 * So, I would like the active menu item (also if it is just a sub menu item) to
   be in white for as long as I am visiting that page in order to highlight the 
   current page that you I´m on. I would love it to get back to light grey (like
   it is now when it is inactive) as soon as I leave the active page.
 * I already tried:
 * $(‘.menu a’).filter(function() {
    return this.href == url; }).addClass(‘better-
   active’);
 * Does anyone know the solution?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhighlight-active-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [chzumbrunnen](https://wordpress.org/support/users/chzumbrunnen/)
 * (@chzumbrunnen)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/highlight-active-menu/#post-9843822)
 * There is already a class: `current_page_item` which I think should work on the
   main level. For ancestors there are classses `current-menu-ancestor`, `current-
   menu-parent`, `current_page_parent`, `current_page_ancestor`, `menu-item-has-
   children`..
 * adding following in to the “additional CSS” renders an awful yellow background
   on the actual current active page.
 *     ```
       .current_page_item,
       .current-menu-ancestor {
       	background-color: yellow;
       }
       ```
   
    -  This reply was modified 8 years, 4 months ago by [chzumbrunnen](https://wordpress.org/support/users/chzumbrunnen/).
 *  Theme Author [Anders Norén](https://wordpress.org/support/users/anlino/)
 * (@anlino)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/highlight-active-menu/#post-9850138)
 * Hi [@nissa1982](https://wordpress.org/support/users/nissa1982/),
 * I’ll add styling for the current menu item in the next version of Hitchcock. 
   Until then, you can follow the instructions added by [@chzumbrunnen](https://wordpress.org/support/users/chzumbrunnen/)
   to add your own active styling. Instead of the yellow background color, you can
   add the following to make the current menu item styling match the link hover 
   styling in the menu:
 *     ```
       .main-menu .current_page_item > a,
       .main-menu .current-menu-ancestor > a {
           color: #fff;
       }
       ```
   
 * (This will probably be the current menu item style added in the theme update 
   as well.)
 * — Anders
    -  This reply was modified 8 years, 4 months ago by [Anders Norén](https://wordpress.org/support/users/anlino/).

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

The topic ‘highlight active menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/hitchcock/2.2.1/screenshot.jpg)
 * Hitchcock
 * [Support Threads](https://wordpress.org/support/theme/hitchcock/)
 * [Active Topics](https://wordpress.org/support/theme/hitchcock/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/hitchcock/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/hitchcock/reviews/)

## Tags

 * [active](https://wordpress.org/support/topic-tag/active/)
 * [active menu item](https://wordpress.org/support/topic-tag/active-menu-item/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 2 replies
 * 3 participants
 * Last reply from: [Anders Norén](https://wordpress.org/support/users/anlino/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/highlight-active-menu/#post-9850138)
 * Status: resolved