highlight parent and current child category when viewing single post

  • xiabolai

    (@xiabolai)


    15 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:

    https://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!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Equal

    (@equalmark)

    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.

    Thread Starter xiabolai

    (@xiabolai)

    Thread Starter xiabolai

    (@xiabolai)

    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?

    Thread Starter xiabolai

    (@xiabolai)

    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!

    Equal

    (@equalmark)

    Try this instead:

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

    Thread Starter xiabolai

    (@xiabolai)

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

    You can see here:

    https://newsite.blairshapiro.com

    Thread Starter xiabolai

    (@xiabolai)

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

    Thread Starter xiabolai

    (@xiabolai)

    Anyone else have any ideas??

    Thanks!

    MichaelH

    (@michaelh)

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

    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

    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

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘highlight parent and current child category when viewing single post’ is closed to new replies.