Custom menu/side bar widget customisation

emmaashton2014 · Member · Jul 17, 2015 at 1:39 pm
Copy link

Add topic to favorites
Hi there, we’ve created some custom menus in the sidebar widget on this page https://01handshake01.wordpress.com/the-vanguard-method-and-systems-thinking-introduction/. Is it possible when users are on one of the pages in the menu to hilight which page they’re on? Eg by turning the text a different colour, so they know where they are in the menu. Does that make sense?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 17, 2015 at 5:42 pm
Copy link
Hi there, yes this is possible. When you are on a page, the menu items has a CSS class that is added that typically looks something like current-menu-item and we can add that into the correct CSS selector to change colors or styling. Add this and then edit the color as desired.
```
.widget_nav_menu .current-menu-item a {
    color: #33dd55;
}
```
One other way would be to leave the color the same and make it bold, like this.
```
.widget_nav_menu .current-menu-item a {
    font-weight: bold;
}
```
emmaashton2014 · Member · Aug 4, 2015 at 12:08 pm
Copy link
Many thanks for your help thescaredpath. We’ve experimented with your code and it worked well until now – we’ve just created a new parent page called “The Vanguard Method and systems thinking” by duplicating the content of the sub-page called “Introduction”. Here’s the page http://vanguard-method.net/the-vanguard-method-and-systems-thinking/. You’ll see that when you’re on the parent page “The Vanguard Method and systems thinking”, all of the text in that section is green, rather than just the individual page. If you click on any of the other sub-pages, such as Introduction, only that page’s text on the menu turns green, which is what we want. How can we ensure that the parent page menu heading just turns green too?
thesacredpath · Member · Aug 4, 2015 at 8:57 pm
Copy link
Oops, change out the rule I had given you for the following. Notice the right angle bracket preceding the “a” in the selector. That holds things to the direct descendant. Or to make the explanation shorter: this will fix it. :)
```
.widget_nav_menu .current-menu-item > a {
    color: #3d5;
    font-weight: 700;
}
```
emmaashton2014 · Member · Aug 13, 2015 at 11:39 am
Copy link
This has worked brilliantly, thank you!
thesacredpath · Member · Aug 13, 2015 at 10:09 pm
Copy link
You are welcome.

No items found.