css menu issue (i think)

  • 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: https://newsite.blairshapiro.com

    Any help would be GREATLY appreciated!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter xiabolai

    (@xiabolai)

    Anyone? I think it may be simple but I’m a bit of a noob…

    Help would be GREATLY appreciated.

    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.

    Thread Starter xiabolai

    (@xiabolai)

    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…

    Thread Starter xiabolai

    (@xiabolai)

    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!

    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.

    Thread Starter xiabolai

    (@xiabolai)

    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;}

    Thread Starter xiabolai

    (@xiabolai)

    Hi,

    Wondered if anyone else can help with this.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘css menu issue (i think)’ is closed to new replies.