Community Forums › Forums › Archived Forums › General Discussion › Active Class in Nav Menu for Blog Posts
Tagged: Navigation Active Classes
- This topic has 11 replies, 2 voices, and was last updated 8 years, 11 months ago by SavvyJackie.
-
AuthorPosts
-
April 14, 2015 at 11:32 am #147902brettatkinMember
I have a couple of StudioPress sites where the typical "current-menu-item" and/or any of the various classes isn't getting added to the code when visiting individual blog post pages.
Here is one site and post that is (Enterprise Pro Theme)
http://brettatkin.com/blog/online-marketing-and-social-media-tips-for-growing-your-business/
Here are two that aren't: (Parallax Pro and Executive Pro themes)
http://www.insideoutinnovations.com/blog/achieving-innovation-success-in-phases-and-frameworks/
http://fcr.betaforming.com/blog/florida-crown-region-makes-record-donation/
What am I missing? What and where should I be looking for fix this?
Thanks
http://www.insideoutinnovations.com/blog/achieving-innovation-success-in-phases-and-frameworks/May 10, 2015 at 7:28 am #151443SavvyJackieMemberHi,
I checked your examples and it appears to be working now. Did you resolve your issue?
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 10, 2015 at 9:30 pm #151629brettatkinMemberJackie,
It still isn't working for me on the second two example sites. On the first site, the "Blog" link isn't highlighted when looking at single post pages and on the second site, the "Recent News" link is isn't highlighted when look at single post pages.
What browser are you using? When you view the source, are you seeing any of the typical “current-menu-item” classes getting added to the navigation?
Thanks
Brett
May 11, 2015 at 7:29 am #151691SavvyJackieMemberI am seeing your issue now, sorry for the confusion on my part. The second two sites are not adding a current-menu-item class when on a single post page.
This code snippet may help: https://littlelauberdesigns.com/2015/01/css-hover-current-menu-items-custom-links/
I remember having to do something like that for the Agency Pro theme and target that specific class I added in the code.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 11, 2015 at 7:38 am #151696SavvyJackieMemberThis too may help:
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 11, 2015 at 8:34 am #151710SavvyJackieMemberI was able to achieve the desired result on my website SavvyJackieDesigns.com - on my portfolio items and blog items.
Added this to my functions.php to add a class of 'current-page-portfolio' to the menu when on single portfolio pages.
//Filtering a Class in Navigation Menu Item for Portfolio single pages add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class($classes, $item){ if(is_single() && ('portfolio' == get_post_type()) && $item->title == 'Portfolio' ){ $classes[] = 'current_page_portfolio'; } return $classes; }
then added these two lines to my stylesheet:
.genesis-nav-menu .current_page_parent > a, .genesis-nav-menu .current_page_portfolio > a, .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .v .current-menu-item > a:hover { background-color: #fff; border-color: #8cd0d0; color: #009999; }
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 11, 2015 at 8:46 am #151713SavvyJackieMemberThese are the two lines I added:
.genesis-nav-menu .current_page_parent > a, .genesis-nav-menu .current_page_portfolio > a,
My theme already adds the current_page_parent class to the Blog menu item, but the stylesheet had no styling for it.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 11, 2015 at 8:50 am #151715brettatkinMemberJackie,
Thank you for the additional help. I won't have time to look at this until later today. I will let you know what happens.
Is this a bug in the framework or the theme?
Thanks
Brett
May 11, 2015 at 9:02 am #151718SavvyJackieMemberI can't say for sure.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 11, 2015 at 9:06 am #151720SavvyJackieMemberOne last thing - the demo of Enterprise Pro has the same behavior of the other two themes, so you can always create a separate install of that and then compare to the one you have that is working they way you want.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 11, 2015 at 3:00 pm #151780brettatkinMemberThanks for the help Jackie. The first two links you provided didn't work. It highlighted the menu item regardless of the page/post because "menu-item-#" gets added no matter where you are on the site.
You're code worked for me though, thanks!
You were correct, I had added some extra code to my site to achieve the same thing for the blog posts. I forgot about doing that.
I looked back at a couple of my custom coded WP themes and this isn't an issue - individual blogs pages are applying the appropriate active classes to the nav menu item. It appears Genesis is using Superfish for the navigation. Could this be the problem? It really seams this should work out of the box, it does for parent child pages.
This is what worked on the Porsche Site. For some reason, this code isn't working for The Events Calendar CPT from Modern Tribe.
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class($classes, $item){ if(is_single() && ('gallery' == get_post_type()) && $item->title == 'Photo Galleries' ){ $classes[] = 'current-menu-item'; } if(is_single() && ('classifieds' == get_post_type()) && $item->title == 'Classifieds' ){ $classes[] = 'current-menu-item'; } if(is_single() && ('tribe_events' == get_post_type()) && $item->title == 'Upcoming Events' ){ $classes[] = 'current-menu-item'; } if(is_single() && ('post' == get_post_type()) && $item->title == 'Recent News' ){ $classes[] = 'current-menu-item'; } return $classes; }
This is what worked in the IOI site. This WOULD NOT work on the Porsche site because I have multiple post types.
function add_custom_class($classes=array(), $menu_item=false) { if ( !is_home() && !is_page() && 'Blog' == $menu_item->title && !in_array( 'current-menu-item', $classes ) ) { $classes[] = 'current-menu-item'; } return $classes; } add_filter('nav_menu_css_class', 'add_custom_class', 100, 2);
May 13, 2015 at 11:45 am #152021SavvyJackieMemberGlad something worked. 🙂
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.