I have been trying desesperately and in vain to highlight the button I have for "Blog" whenever I am in the the main page (I had created a custom link with my homepage)...it is really driving nuts!

The only time I have been able to highlight it was when I used the ".menu-item-has-children", but then it stays highlighted even when I enter other pages or menus (e.g.: "About" or "Archives").

Is there any way to solve this using just any CSS command or perhaps a conditional? I must say I am totally a zero with html and would like to avoid to use it (if possible, of course).

Many thanks in advance, Andreas

  • Same your site with me so I can help you – Castiblanco Aug 27 '18 at 17:33
  • loadthepistol.com – Andreas Aug 27 '18 at 17:34
  • Which one is your blog page, archives/ ? – Castiblanco Aug 27 '18 at 17:35
  • No...the "Blog" itself. I mean, it will just redirect to the main page, where you have all the posts. – Andreas Aug 27 '18 at 17:36
  • I saw it lol sorry – Castiblanco Aug 27 '18 at 17:37

Wordpress marks the currently displayed page in the menu with CSS classes .current-menu-item, .current-menu-parent, .current-menu-ancestor. Add the required styles to highlight items using these classes.

Sample Menu:

* Blog
  * First Category
  * Second Category
* About
* Contact

When you open blog page, the corresponding menu item ("Blog") has a class .current-menu-item. Similarly, when you open a contact page, the corresponding menu item will have a class .current-menu-item.

if you go to the page second category, the menu item "Second Category" will have class .current-menu-item and "Blog" item will have class .current-menu-parent.

UPDATE (Highlight similar to hover)

To highlight "Blog" on your site when you are on the home page or one of the categories ("Music & Party", "Travel & Culture", etc.) add to styles:

.home #menu-item-1258 > a span, 
#menu-main > .current-menu-item > a span, 
#menu-main > .current-menu-parent > a span, 
#menu-main ul .current-menu-item, 
#menu-main ul .current-menu-parent { 
   background-color: #37cadd; 
|improve this answer|||||
  • Thanks nmr, that was also very helpful! And by the way, is there a way to change the form of this highlighted menu? I would like it be exactly as the hover, which looks much cooler (like this rectangle with rounded corners). – Andreas Aug 28 '18 at 11:21
  • @Andreas Yes, I updated the answer. – nmr Aug 28 '18 at 11:41
  • Hey nmr, it is not working...it is still showing the "big squares" when a page/menu is highlighted. – Andreas Aug 28 '18 at 11:49
  • Did you replace .current-menu-item, .current-menu-parent to .current-menu-item > a span, .current-menu-parent > a span and remove lines .home #menu-item-1258, .current-menu-item {, .current-menu-item {? I still see the old styles in the page source (lines 840, 871, 877). @Andreas – nmr Aug 28 '18 at 12:22
  • Yes, but now it only works when I am inside the sub-categories ("Life & Health", etc). Because when I open the other tabs (e.g.: "About"), it is still showing the square. Plus, the main page is showing the square in the word "Blog" as well... – Andreas Aug 28 '18 at 12:34

You have to play with this CSS selector. I don't really know what do you mean by highlight, it may be a background in which case:

.home #menu-item-1258, .current-menu-item {
    background: blue;

If you want to elaborate, what do you mean by highlight, I can help you in case it's nothing crazy, or you can learn a bit of CSS and play with it.

In case you don't know how to add CSS, check this out.

|improve this answer|||||
  • That works but when I change to another tab (e.g.: "About"), it stays highlighted (by that I mean with a background color)... What I want is that it works like that "About" page, for instance: when you are inside it, it is highlighted; otherwise, it isn't. – Andreas Aug 27 '18 at 18:12
  • I just changed the code, use that new one. – Castiblanco Aug 27 '18 at 18:14
  • (By the way, is there a way to make the form of the background color - which is now like a square - the same as the one of the hover, which is like a rectangule with rounded corners?) – Andreas Aug 27 '18 at 18:23
  • you can mark the answer as correct if it helps. My code example is focusing the li element, the hover thing is focusing the a, so change it to: .home #menu-item-1258 a, .current-menu-item a, it should work – Castiblanco Aug 27 '18 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.