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