WordPress.org

Ready to get started?Download WordPress

Forums

highlight parent and current child category when viewing single post (13 posts)

  1. xiabolai
    Member
    Posted 4 years ago #

    Hi, I'm having a problem when trying to dynamically highlight a parent menu item when a child sub category item is selected. Also, if a post is selected under the subcategory, I'd like the top level parent menu item to stay highlighted.

    The template I'm using has the top level parent item a non-link and not a category, and the submenu items are the categories.

    Here's that code from my header:

    <li><a>Work</a>
    
        		<ul>
        			<?php wp_list_categories("exclude=$blog_ID&title_li="); ?>
        		</ul>
        	</li>

    So in this scenario, when you roll over "Work" in the menu, work is not clickable, but you get a drop down submenu with clickable category links, like "interactive," "email," "print," etc. That's just how the template I'm using is set up.

    I know how to make single Home, About and Contact pages dynamically highlight, here's the php and css I'm using for those:

    code:

    <li<?php
                    if (is_page('About'))
                    {
                    echo " id=\"current\"";
                    }?>>
                    <a href="<?php bloginfo('url') ?>/about">About</a>
            </li>

    css:

    #current a {font-weight:bold;color:#e2007d;}

    Here's my test site:

    http://www.newsite.blairshapiro.com

    Again, it should be that only the parent menu item, "Work," stays highlighted when one of the child submenu items OR one of the posts belonging to the particular submenu child is selected. I hope that's clear.

    I think it has something to do with the is_category, in_category and if/else statements as well as the css, but I just can't put together the right combination to make it work.

    I'm sort of a newb, can anyone show me an example of the code and css to use to achieve this?

    Any help would be appreciated.

    Thanks!

  2. equalmark
    Member
    Posted 4 years ago #

    Work appears to have a class of 'sfHover' when you are on one of the page that drop down under work. Therefore this is your stylesheet should style it:

    #header ul.sf-menu li.sfHover {
    background-color: #CCCCCC;
    }

    The example above would make the 'work' link grey when viewing one of the work sub links.

  3. xiabolai
    Member
    Posted 4 years ago #


  4. xiabolai
    Member
    Posted 4 years ago #

    Hey, thanks...let me try this!!

    Also, do you know how to keep 'work' highlighted if I'm in a post from one of the 'work' sublinks?

  5. xiabolai
    Member
    Posted 4 years ago #

    Hi equalmark,

    I tried this and it's only partially working. The grey bg color doesn't stay once the sublink is clicked on. Any ideas?

    Thanks!

  6. equalmark
    Member
    Posted 4 years ago #

    Try this instead:

    #header ul.sf-menu li.sfHover a {
    background-color: #CCCCCC;
    }
  7. xiabolai
    Member
    Posted 4 years ago #

    Unfortunately that doesn't work either. It's just turning the whole dropdown bg a different color.

    You can see here:

    http://newsite.blairshapiro.com

  8. xiabolai
    Member
    Posted 4 years ago #

    Just thought of something...it shouldn't be a 'hover' class because i want it to stay highlighted, right?

  9. xiabolai
    Member
    Posted 4 years ago #

    Anyone else have any ideas??

    Thanks!

  10. MichaelH
    Member
    Posted 4 years ago #

    Note I deleted your duplicate post of the same subject. Please refrain from posting duplicate topics.

  11. wingye
    Member
    Posted 4 years ago #

    Hi sorry to pick up the old post, but did you come to a solution yet? As i want to do the same thing but i just cant get it to work..

    thanks

  12. tictok
    Member
    Posted 4 years ago #

    Hi sorry to pick up the old post, but did you come to a solution yet? As i want to do the same thing but i just cant get it to work..

    Same here... looking for help too.
    when a reader views a post as a single after clicking through from an excerpt I need to find away to keep the relevant Nav highlighted.

    Any ideas?

    Thanks

  13. brettgoodrich
    Member
    Posted 3 years ago #

    Just use current_page_parent and current_page_ancestor.
    I haven't tried applying this to anything other than pages, but here's how I do mine:

    #menus li.current_page_parent a {
    	**Whatever you want the highlighted parent to look like**
    }

    You just go into your stylesheet and add this in there (modified, of course, to your setup). You can use current_page_ancestor if you want to highlight the parent even when you're more than one level down.

Topic Closed

This topic has been closed to new replies.

About this Topic