WordPress.org

1. Nicster3001
   Member
   Posted 9 months ago #

   Hi, bit of a novice with CSS. I've successfully added a hover nav bar to my custom theme. Now I just need the nav button to remain active once the page loads. Any help would be much appreciated.

   I've created a custom Nav bar and added it to my header.php file:

   <div class="clear"></div>
   <div id="navmenu" class="col-full">
   <table width="950" height="101" border="0" cellpadding="0">
       <tr>
         <th scope="col"><a href="http://cashcall.tv/">Description text that will not be displayed</a><span></span></th>
        <th scope="col"><th scope="col"><a href="http://cashcall.tv/?page_id=2">Description text that will not be displayed</a><span></span></th>
         <th scope="col"><a href="http://cashcall.tv/?page_id=4">Description text that will not be displayed</a><span></span></th>
       <th scope="col"><a href="http://cashcall.tv/?page_id=21">Description text that will not be displayed</a><span></span></th></table></div>

   And styled using CSS:

   #navmenu {
   width:1001px;
   height:103px;
   z-index:1;
   background-image:url(http://cashcall.tv/wp-content/uploads/2011/08/CCnavbottomFINAL.jpg);
   background-repeat:no-repeat;
   }
   #roll_one {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_one:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #roll_two {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_two:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #roll_three {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_three:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #roll_four {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_four:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #navmenu .current_page_item {background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   {

   All that's missing is the current page code which, despite trying lots of different "class=" ".current_page" options I haven't been able to implement. Many thanks for your help!

2. peredur
   Member
   Posted 9 months ago #

   Link?

   "class=" ".current_page"

   Looks a bit dodgy to me, that.

   Using tables for layout is not a good idea, either.

   Cheers

   PAE

3. Nicster3001
   Member
   Posted 9 months ago #

   Hi PAE, that's why I didn't use it. Haven't had a problem with tables before, any recommendations are welcome though.

   With the CSS issue, I'm interested to know how custom nav menus activate an "on page" image.

   cheers

4. peredur
   Member
   Posted 9 months ago #

   Just add a class to the current page link. Something like class="current" is usually the way.

   You could use conditional tags in your html to set the class if the page was the home page, or if it had a specific id etc.

   Cheers

   PAE

5. Nicster3001
   Member
   Posted 9 months ago #

   Thanks PAE,

   Have added the class to the CSS:

   #navmenu {
   width:1001px;
   height:103px;
   z-index:1;
   background-image:url(http://cashcall.tv/wp-content/uploads/2011/08/CCnavbottomFINAL.jpg);
   background-repeat:no-repeat;}
   #roll_one {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_one:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   .rollone {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #roll_two {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_two:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #roll_three {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_three:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   #roll_four {display:block; width:250px; height:103px; text-indent:-999em; background:url("http://cashcall.tv/wp-content/uploads/2011/08/nonhover.jpg");}
   #roll_four:hover {background:url("http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg");}
   .current {
     background-image:url(http://cashcall.tv/wp-content/uploads/2011/08/hover.jpg);}

   and added to the main table:

   <div class="clear"></div>
   <div id="navmenu" class="col-full">
    <table width="950" height="101" border="0" cellpadding="0">
       <tr>
         <th scope="col"><a href="http://cashcall.tv/" class="current"id="roll_one">Description text that will not be displayed</a><span></span></th>
        <th scope="col"><th scope="col"><a href="http://cashcall.tv/" class="current" id="roll_two">Description text that will not be displayed</a><span></span></th>
         <th scope="col"><a href="http://cashcall.tv/?page_id=4" class="current" id="roll_three">Description text that will not be displayed</a><span></span></th>
       <th scope="col"><a href="http://cashcall.tv/?page_id=21" class="current" id="roll_four">Description text that will not be displayed</a><span></span></th></table></div>

   but it doesn't seem to be working. Can you see anything wrong with my code that maybe preventing the change?

   many thanks

6. peredur
   Member
   Posted 9 months ago #

   You've added class="current" to all your elements, so they're all going to be styled as though they were the current page. You need to use conditional tags to add it to just one element.

   Cheers

   PAE

Reply

You must log in to post.