WordPress.org

1. xiabolai
   Member
   Posted 2 weeks ago #

   Need help with a css issue. With a dropdown menu, I'm trying to get the parent menu item of sublinks to stay highlighted when in one of the sublink categories.

   For example, my top menu item is called 'Work' and it has sublinks like 'Interactive' 'Print' 'Email' etc. When user has clicked on, say, 'Email' I want both 'Email' and its parent menu item 'Work' to both stay highlighted.

   I now have it so the sublink stays highlighted, but I cannot get the parent menu item 'Work' to stay highlighted. Here's the curent css:
   

   .sf-menu a:hover{color:#e2007d;}
   .sf-menu li.current-cat a{font-weight:bold;color:#e2007d;}
   .sf-menu li.current-cat a:hover{font-weight:bold;color:#e2007d;}

   I have tried the following css to get the parent item 'Work' to stay highlighted, but it's not working:
   

   .sf-menu li.current-cat-parent a{font-weight:bold;color:#e2007d;}
   .sf-menu li.current_page_parent a{font-weight:bold;color:#e2007d;}
   .sf-menu li.current_page_ancestor a{font-weight:bold;color:#e2007d;}

   My first goal is to get 'Work' to stay highlighted when in a subcategory. After that, I'd like to get 'Work' to ALSO stay highlighted if user in viewing a post from one of the subcategories under 'Work'.

   Here's a link to the test site to see it: http://newsite.blairshapiro.com

   Any help would be GREATLY appreciated!

2. xiabolai
   Member
   Posted 2 weeks ago #

   Anyone? I think it may be simple but I'm a bit of a noob...

   Help would be GREATLY appreciated.

3. esmi
   Member
   Posted 2 weeks ago #

   If you check the top level list item (for example, "Work" when on the Outdoor page), you'll see that it doesn't have a class assigned to it at all.

   <li class="">
   <a>Work</a>

   So, right now, it's not your CSS, it's code generating the menu that's the problem.

4. xiabolai
   Member
   Posted 2 weeks ago #

   Hi esmi,

   That makes total sense. If I add a class, what would it be "sf-menu"?
   And what would the css be to get it to behave like I wante?

   Thanks!! Been racking my brain over this...

5. xiabolai
   Member
   Posted 2 weeks ago #

   Well, I tried adding the "sf-menu" class and that messed everything up, must have been conflicting with other css.

   Can you give me an example of a class name and what the css would be?

   much appreciated!

6. esmi
   Member
   Posted 2 weeks ago #

   If I add a class, what would it be "sf-menu"?

   I suppose you could use something like sf-menu-ancestor but what code will be generating this class?

   And what would the css be to get it to behave like I wanted?

   What you've posted above should work provided you changed it to reference the new class.

7. xiabolai
   Member
   Posted 2 weeks ago #

   Hi esmi,

   Well, I tried this but things are getting very complicated and affecting other things throwing off the whole menu.

   I know it's asking a lot, but here's both the header.php and style.css...any way you can help me put this puzzle together? I think I'm really close...

   Do i need some sort of conditional statement for the 'work' link? Like I have for the 'Home', 'About', and 'Contact'?

   Here's my header.php (i tried adding the <li class="menu" above 'work'):

   // pull from theme options
   global $blog_ID;
   $blog_ID = get_option('T_blog_ID');
   ?>
   <div id="header" class="grid_12">
   	<div id="logo">
   		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   		<span class="description"><?php bloginfo('description'); ?></span>
   	</div>
    	<?php if(function_exists('get_search_form')) : ?>
   		<?php get_search_form(); ?>
   		<?php else : ?>
   		<?php include (TEMPLATEPATH . '/searchform.php'); ?>
   	<?php endif; ?>
   
       <!-- Navigation -->
       <ul class="sf-menu">
       <li<?php
                   if (is_home())
                   {
                   echo " id=\"current\"";
                   }?>>
                   <a href="<?php bloginfo('url') ?>">Home</a>
   </li>
   
   <li class="menu">
   
         <a>Work</a>
   
                     <ul>
   
                        <?php wp_list_categories("exclude=$blog_ID&title_li="); ?>
       		</ul>
           </li>
   
       	<!-- <?php wp_list_categories("include=$blog_ID&title_li="); ?> -->
       	<li>
   
   <li<?php
                   if (is_page('About'))
                   {
                   echo " id=\"current\"";
                   }?>>
                   <a href="<?php bloginfo('url') ?>/about">About</a>
           </li>
   
   <li<?php
                   if (is_page('Contact'))
                   {
                   echo " id=\"current\"";
                   }?>>
                   <a href="<?php bloginfo('url') ?>/contact">Contact</a>
           </li>
       	</li>
       </ul>
   
   </div>
   <hr class="grid_12" />

   And here's the style.css for the navigation (there's a separate superfish.css):
   

   /* Navigation Highlights */
   /* current-cat a, current_page_item a {font-weight:bold;color:#e2007d;} */
   
   #current a {font-weight:bold;color:#e2007d;}
   .sf-menu a:hover{color:#e2007d;}
   
   .sf-menu li.current-cat a{font-weight:bold;color:#e2007d;}
   .sf-menu li.current-cat a:hover{font-weight:bold;color:#e2007d;}
   
   .sf-menu-ancestor li.current-page-item a{font-weight:bold;color:#e2007d;}
   .sf-menu-ancestor li.current-cat-parent a{font-weight:bold;color:#e2007d;}
   .sf-menu-ancestor li.current_cat_ancestor a{font-weight:bold;color:#e2007d;}

8. xiabolai
   Member
   Posted 2 weeks ago #

   Hi,

   Wondered if anyone else can help with this.

Reply

You must log in to post.