change colour/underline menu the article is in.

simammichipuo · Member · Apr 1, 2015 at 9:59 pm
Copy link

Add topic to favorites
Hi!
Can I highlight somehow (underline/change colour) the menu section I’m in once i’m in it?
I mean: I’m in this section Cre-attività http://simammichipuo.com/category/cre-attivita/
When I’m in there, is it possible to highlight somehow the related category in the menu on top?
Thks
:)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 2, 2015 at 2:18 pm
Copy link
Hi, we can use the current-menu-item CSS class to style the menu item for the page you are on. Here is an example. I’ve included a couple styling declarations to give you a start. You can use either or both. If you don’t use both, you can delete the one you do not use, and of course you can edit the color also.
```
li.current-menu-item a {
    text-decoration: underline;
    color: #cc0000;
    font-weight: bold;
}
```
simammichipuo · Member · Apr 2, 2015 at 2:36 pm
Copy link
Thanks a lot! It works properly!
Is it possibile to use different colours for each category in the menu?
What are the option I could use as text decoration?

Thanks again,
Giorgia
thesacredpath · Member · Apr 3, 2015 at 7:04 pm
Copy link
Great!

On text decoration, the only two useful ones would be underline and overline. There is also line-though, but that wouldn’t be very useful in this application.

We can do different colors for different categories by using the unique menu id for the specific menu items. I’ll use Cre-attività as an example here. I used the web inspector in my browser to find the HTML for that menu item and this is what the beginning looks like:
<li id="menu-item-315" class="...
IDs in CSS will start with a # symbol, so the following would change the color of the menu item when the mouse pointer is not over it.
```
#menu-item-315 a {
    color: #00ee00;
}
```
This would change the color of that menu item when the mouse is over it.
```
#menu-item-315 a:hover {
    color: #ee7700;
}
```
You can use the above as a guide and make changes to the other items as you desire.
simammichipuo · Member · Apr 5, 2015 at 7:59 pm
Copy link
Thanks a lot! :)
great options.
Giorgia
simammichipuo · Member · Apr 6, 2015 at 1:45 pm
Copy link
hi again!
I’m now testing this option and works properly for the main menu but not for the sub menu.
I mean, when I click on a section from the main menu it highlights and change color accordingly (http://simammichipuo.com/category/green-corner/). If I select a sub menu from scratch (http://simammichipuo.com/category/veg-svezzamento/) , once I select it changes colour itself but when I move the pointer I can see that the menu it belongs to doesn’t change colour to highlight the related section I am in.
Is it possible to change the colour both of the sub menu and the related main menu?

Thanks
Giorgia
thesacredpath · Member · Apr 6, 2015 at 6:47 pm
Copy link
Hi, to have the current menu item parent have the same styling as the current menu item, change your rule to look like this.
```
li.current-menu-item a, .current-menu-parent a {
    color: #6b91f6;
    font-weight: 700;
}
```

No items found.