You must be logged in to post
Search Forums:


 






Wildcard Usage:
*    matches any number of characters
%    matches exactly one character

Active Navigation State Not Working

UserPost

12:00 am
November 20, 2011


condor

Member

posts 3

1

Hello, I customized the heck out of the theme and I made custom navigation buttons and

I am able to set the "a" and the "a:hover", but I can't get the "a:active" to work.

My site is http://originalpicturewindow.com

Thanks for any help!

The code is below…

HTML (I only made the changes to the last two links to test it)

<?php { ?>
<div id="headnav">
  <p class="pw5"><a style="float:right;" href="http://originalpicturewindow.com/contact"><img id="contact" src='http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Contact.jpg&#039; width=90 height=37 /></a>
  <p class="pw4"><a style="float:right;" href="http://originalpicturewindow.com/our-story"><img id="story" src='http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Story.jpg&#039; width=90 height=37 /></a>
  <p class="pw3"><a style="float:right;" href="http://originalpicturewindow.com/pricing"><img id="pricing" src='http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Pricing.jpg&#039; width=90 height=37 /></a>
  <p class="pw2"><a id="pw2a" style="float:right;" href="http://originalpicturewindow.com/gallery"></a>
  <p class="pw1"><a style="float:right;" href="http://originalpicturewindow.com"></a></p>

  <?php } ?>
</div>
 

CSS

.pw1 a {
width:90px;
height:37px;
background:url(http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Welcome.jpg) 0 0 no-repeat;
    float: right;
    margin-left: 3px;
}

.pw1 a:hover {
width:90px;
height:37px;
background:url(http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Gallery.jpg) 0 0 no-repeat;
    float: right;
    margin-left: 3px;
}

.pw1 a:active {
width:90px;
height:37px;
background:url(http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Contact.jpg) 0 0 no-repeat;
    float: right;
    margin-left: 3px;
}

.pw2 a {
width:90px;
height:37px;
background:url(http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Gallery.jpg) 0 0 no-repeat;
    float: right;
    margin-left: 3px;
}

.pw2 a:hover {
width:90px;
height:37px;
background:url(http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Contact.jpg) 0 0 no-repeat;
    float: right;
    margin-left: 3px;
}

.pw2a a:active {
width:90px;
height:37px;
background: url(http://originalpicturewindow.com/wp-content/uploads/2011/11/Nav-Welcome.jpg) 0 0 no-repeat;
    float: right;
    margin-left: 3px;
}

7:53 am
November 20, 2011


Ryan

Admin

posts 1547

2

This is going to be a little more complicated that just styling the :active pseudo-class.  The :active state is one where the link is being clicked.  It's not when the link is the active page.  So there's a difference.

Normally WP menus trigger the active state by adding a new class to the menu item dynamically.  But since you're using custom code rather than wp_list_pages or something like that, that class won't get added.

So what you need to do is open header.php and find the body tag and change it to this:

<body <?php body_class($class); ?>>

That will make each page have a unique class attached to it that is created by WP.

Then you'll be able to attach the body class for that specific page using the post ID to your CSS code, and then style the menu button with the different background image.

Does that make sense?  It's a real brief expanation, but from the looks of your site you have decent coding skills and can probably implement it.  Nice work on the customizations btw!

12:01 pm
November 20, 2011


condor

Member

posts 3

3

Hi Ryan, thanks for the quick reply. Is there any way you could give me a quick example

of what I would need to have the body class look like.  I have some coding skill but use

firebug to help me but firebug only works for me if I have something to go off of.  That code

you described is not there so I won't have something to see.  I would have to search the big G

for like 100 hours to find some examples, ha.

 

Anything you can give would be greatly appreciated.

 

Matt

9:52 am
November 21, 2011


Ryan

Admin

posts 1547

4

After adding the PHP code to the body tag, when you open a page, you'll have a new class applied to the body tag that looks like this:

page-id-67

On posts, you'll have something like this:

postid-1713

The numbers will be different for every page and post, which allows you to use those classes to target specific CSS properties on the pages where you need to use the alternate background image.

By the looks of your site, you already go it figured out though!

11:51 am
November 21, 2011


condor

Member

posts 3

5

Thanks for all your help.

I figured it out. Now I just have to decide

how I want the different states to look.

 

Have a good holiday!

 

Matt