Sidebar Widget Menu with active page highlighted?

[Vera]

I don’t know if this is possible without getting too complicated —- or even if I can ask it here, but here goes anyway:

I make extensive use of page- and section-specific navigation menus in the sidebar using the Content Aware plugin (not on my home page but most others). Right now there is nothing to make it obvious that these are clickable items. It would help a lot if the active page could be highlighted in the menu.

Is there a relatively simple way to make widget menus do that? Maybe a plugin I haven’t yet found?

Thanks in advance!

Usual environment: 9.7” iPad Pro, iOS 13.4+
Desktop: Mac OS 10.15.4

[Leo]

Hi there,

Which page are you referring to?

I don’t see a sidebar on the home page.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vera]

I did mention that the home page doesn’t have sidebars — I probably should’ve sent direct link. Sorry.

Try a page from under the Seminars menu. That’s pretty typical of my layouts.

Thanks!

Usual environment: 9.7” iPad Pro, iOS 13.4+
Desktop: Mac OS 10.15.4

[David]

Hi there,

try this CSS:

.inside-left-sidebar .widget ul li.current-menu-item:not(.menu-separator) a {
    font-weight: 900;
    color: green;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vera]

Hey David,

Your CSS looks like it will color all the menu items, no? I was hoping for something that will only color the menu item of the current page — and do it automatically — like the menu bar does.

Usual environment: 9.7” iPad Pro, iOS 13.4+
Desktop: Mac OS 10.15.4

[Leo]

Hmm I’m seeing li.current-menu-item in David’s CSS so it should only target the current page.

Have you tried it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vera]

You’re right, Leo — I didn’t see that I needed to scroll to see the entire code. I did not try it because from what I could see of it, it didn’t seem it would work… But I just tried and it does work — perfectly!

Thank you David and Leo, and I’m sorry about the oversight (or undersight).

Vera

Usual environment: 9.7” iPad Pro, iOS 13.4+
Desktop: Mac OS 10.15.4

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leslie]

Hi GP team, I just wanted to reach out regarding your awesome support. I googled “how to highlight current page in sidebar menu” and I found all sorts of answers that were way too complicated for me to implement. Then I thought, I’ll bet GP has something on this in the support forum. Sure enough I found this post right away, added the CSS and voila, I got exactly the behavior I wanted. I am very grateful for the support you’ve given me directly and indirectly by your answers to other people’s questions. This isn’t the first time I’ve solved my own problems by finding answers in this forum. Thanks guys.

[Leo]

That’s awesome to hear.

Google search is the best. We often use “Question + GeneratePress” format to google search our own answers.

Much better than our forum search 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts