Welcome! To use this support forum, please Login or Join Today!

   

Active/current page on main menu

{name}
Rank

Total Posts: 2

Joined 2017-02-25

PM

 

How do we make it shown to visitors which page of the site they’re on?

All your other themes seem to do that. For instance on this forum, the current page (SUPPORT) is in blue and highlighted while the others are in grey. How can I do that in Avery?

Is there a class/code that can be added?

It’s quite important for my site. Thanks for replying.

{name}
Rank

Total Posts: 18

Joined 2015-08-06

PM

 

Hi!

Fellow forum member here. WordPress adds a class to menu items for current pages, so you can manipulate them with CSS in your child theme via the “current-menu-item” class. For example:

/* Regular menu links */
#nav a {
 
color#72747c;
}

/* Menu links for the current page */
#nav .menu li.current-menu-item a {
 
color#ff2200;

Ancestor and child menu relationships can become more complex, but hopefully this will help you. There’s more info on this page for reference.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Thanks @smpl_beep for the help. There are several “active” classes that may be appended to the li tag.
Avery has a built-in script which appends an ‘.active’ class on any of the following.

li.current_page_item,
li.current_page_parent,
li.current_page_ancestor,
li.current-cat,
li.current-cat-parent,
li.current-menu-item

What he posted above will work, however if it for some odd reason it doesn’t trigger the current-menu-item class, you can also try:

/* Menu links for the current page */
#nav .menu li.active a {
 color: #ff2200;
} 

 

{name}
Rank

Total Posts: 2

Joined 2017-02-25

PM

 

Thanks to both of you!

I will try these asap. Fingers crossed!