1,105,225 Community Members

Navigation issues

Member Avatar
mgn2683
Junior Poster in Training
90 posts since Dec 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I'm having issues trying to get a little triangle (spike.gif) to appear under the link of a current page. For instance, it won't appear on rollover, but just when someone is on a certain page. I've enclosed a link to an image of how I'd like to do this. http://mgndesign.com/draft/images/about_example.gif

Does anyone have any insight on how to get this accomplished? Thanks ahead of time.

Member Avatar
pritaeas
mod_pritaeas
11,291 posts since Jul 2006
Reputation Points: 1,420 [?]
Q&As Helped to Solve: 1,832 [?]
Skill Endorsements: 155 [?]
Moderator
Featured
Sponsor
 
0
 

You could do the following, provided the image contains only the triangle, and not the text:

li.topnav-current-page:hover {
  background: url(images/about_example.gif) bottom left no-repeat;
}
Member Avatar
mgn2683
Junior Poster in Training
90 posts since Dec 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I used this code and it definitely helped! But now I have two issues: first it doesn't appear in the middle of the navigation item, it always appears in the left. I would also like to have the spike be there automatically on the page. For instance, if it is the 'About' page, then it would automatically be there, whether hover or not. I appreciate the help so far!

Member Avatar
pritaeas
mod_pritaeas
11,291 posts since Jul 2006
Reputation Points: 1,420 [?]
Q&As Helped to Solve: 1,832 [?]
Skill Endorsements: 155 [?]
Moderator
Featured
Sponsor
 
0
 
#menu ul li.topnav-current-page {
  background: url(images/about_example.gif) bottom center no-repeat;
}
#menu ul li.topnav:hover {
  background: url(images/about_example.gif) bottom center no-repeat;
}
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: