Member Avatar for mgn2683

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.

  • 2 Contributors
  • 3 Replies
  • 85 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for pritaeas

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 for mgn2683

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 for pritaeas 
#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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.