Highlight the “Home” / “Blog” button while on main page

by

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

2 Answers
2

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; 
}

Leave a Comment