WordPress.org

1. katemgilbert
   Member
   Posted 2 years ago #

   I have an image navigation menu, and am trying to make it so the hover class displays when the corresponding page is active. Site is karminmusic.com.

   I have implemented the Method Two on this page but it didn't solve the problem: http://codex.wordpress.org/Dynamic_Menu_Highlighting

   Can anyone see what I'm doing wrong here? Pasting CSS and PHP below:

   PHP:

   <div id="menu">

   <li<?php
   if (is_page('Home'))
   {
   echo " id=\"current.home\"";
   }
   ?>>

   <li<?php
   if (is_page('See'))
   {
   echo " id=\"current.see\"";
   }
   ?>>

   <li<?php
   if (is_page('Follow'))
   {
   echo " id=\"current.follow\"";
   }
   ?>>

   <li<?php
   if (is_page('Store'))
   {
   echo " id=\"current.store\"";
   }
   ?>>

   <!--<?php wp_list_pages('title_li=&depth=-1&sort_column=menu_order'); ?>-->

   </div>

   CSS:

   #current.home {

   background-image: url("http://karminmusic.com/wordpress/wp-content/uploads/2010/03/home.png");

   background-repeat:no-repeat;

   }

   #current.see {

   background-image: url("http://karminmusic.com/wordpress/wp-content/uploads/2010/03/see.png");

   background-repeat:no-repeat;

   }

   #current.follow {

   background-image: url("http://karminmusic.com/wordpress/wp-content/uploads/2010/03/follow.png");

   background-repeat:no-repeat;

   }

   #current.store {

   background-image: url("http://karminmusic.com/wordpress/wp-content/uploads/2010/03/store.png");

   background-repeat:no-repeat;

   }

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   i have the feeling, the problem lies with the id names:
   http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names

   having a dot in the id names seems to be invalid - try renaming them using an underscore or hyphen.

   also, if i look at your code, the output seems to something like:

   <div id="menu">
   
   <li id="current.home">
   
   <li>
   
   <li>
   
   <li>
   
   <!--<?php wp_list_pages('title_li=&depth=-1&sort_column=menu_order'); ?>--> 
   
   </div>

   does that make sense (?)
   and, shouldn't it be wrapped in <ul> tags?

3. katemgilbert
   Member
   Posted 2 years ago #

   Thanks, @alychmyth. I switched the dots to dashes, and it works, but presented a new problem.

   Now, it shows the active state while on current page, but ALSO the inactive state. The two icons appear on top of each other.

   I checked my code and I don't have any other calls to active. Does anyone know how I can fix this?

   Site: karminmusic.com

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   #current_see a.see {
   
       background-image: url("http://karminmusic.com/wordpress/wp-content/uploads/2010/03/see.png");
   
   	background-repeat:no-repeat;
   
   	}

5. katemgilbert
   Member
   Posted 2 years ago #

   Thanks, but that didn't work. It reverted back to showing no current.

   I am wondering if it has something to do with adding another conditional command?

Topic Closed

This topic has been closed to new replies.