WordPress single page, categories and archives menu current item
-
I was wondering if someone can help me with the following, as I cant get my head around how to do it!
On my website I have a menu:
Home | About | Skills | Portfolio | Contact
To call the above menu I have the following in my header.php file:
<nav> <?php wp_nav_menu( $args ); ?> </nav>
At the moment when the page is active the link’s background color changes, here is the CSS and HTML generated:
header ul li a { border-radius: 4px; background-color: transparent; border: 1px solid transparent; color: #939393; margin: 0px; border-image: initial; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; font-size: 18px; text-decoration: none; } header ul li.current-menu-item a, header ul li a:hover { -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.042); border: 1px solid rgba(0, 0, 0, 0.15); margin: 0; border-image: initial; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; color: #939393; } header ul li.selected { -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.042); border: 1px solid rgba(0, 0, 0, 0.15); margin-top: -3px; border-image: initial; padding-left: 0px; padding-right: 0px; padding-top: 3px; padding-bottom: 3px; color: #939393; }
Heres the HTML generated:
<nav> <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8888/paulkenyon/home/">Home</a></li> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost:8888/paulkenyon/about/">About</a></li> <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/paulkenyon/skills/">Skills</a></li> <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/paulkenyon/portfolio/">Portfolio</a></li> <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://localhost:8888/paulkenyon/contact/">Contact</a></li> <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://localhost:8888/paulkenyon/blog/">Blog</a></li> </ul></div> </nav>
The above works fine, but what I am trying to achieve is when the user clicks on a blog post or archive or selects a category I want the ‘Blog’ link to remain highlighted with the different colored background-image.
At the moment nothing shows.
Is there a function I can use that states all single, and archive pages to highlight the ‘blog’ anchor?
I hope the above makes sense.
If anyone could help it would be greatly appreciated! 🙂
Thanks in advance
-
Did you found any solution to this problem ? I’m looking for the same thing
- The topic ‘WordPress single page, categories and archives menu current item’ is closed to new replies.