2

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

7
  • Same your site with me so I can help you Aug 27, 2018 at 17:33
  • loadthepistol.com
    – Andreas
    Aug 27, 2018 at 17:34
  • Which one is your blog page, archives/ ? Aug 27, 2018 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, 2018 at 17:36
  • I saw it lol sorry Aug 27, 2018 at 17:37

2 Answers 2

1

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; 
}
13
  • 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, 2018 at 11:21
  • @Andreas Yes, I updated the answer.
    – nmr
    Aug 28, 2018 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, 2018 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, 2018 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, 2018 at 12:34
0

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.

4
  • 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, 2018 at 18:12
  • I just changed the code, use that new one. Aug 27, 2018 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, 2018 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 Aug 27, 2018 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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