WordPress.org

Support

Support » Themes and Templates » Top nav, add alternating image after each nav (li img 1, li img2, li img1)

Top nav, add alternating image after each nav (li img 1, li img2, li img1)

  • I’m doing a fun site that has a ‘Las Vegas’ vintage tacky sign theme. I created two small ani gif files that are supposed to be the blinking (running) light bulbs used on those old signs.

    So what I was thinking was, WordPress gets the first navigation
    <li>Home<img scr="img1.gif"></li> <li>About<img scr="img2.gif"></li> <li>Contact<img scr="img1.gif"></li> Etc.

    Anyone got any ideas how to do this? 😀 And yes, I’m being ambitious (LOL).

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    @esmi

    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

    Is this CSS or a php thing?

    I don’t think animated .gifs work when they are backgrounds (but gave it a try and yes you can)… so I thought this would be a php issue.

    Or were you thinking using the image as the actual ‘bullet’? (which I wasn’t thinking when I thought it up). But when I did look at the classes the LI’s get assigned it seems there are two –

    1. page_item page-item-2 (or what ever the number it would be)
    2. current_page_item (which would obviously change whenever you change pages)

    How would you deal with the dynamic ‘current_page_item’ class?

    esmi

    @esmi

    Forum Moderator

    It’s a CSS thing. The fact that the images are animated shouldn’t make any difference. I had to do something vaguely similar on a site a few years back (the client insisted on it) and I didn’t have any problems with it. But then I wasn’t adding the animations to a dynamic menu – which is where you will start to hit problems.

    You could have a look at some advanced CSS selector techniques – such as
    http://www.w3.org/Style/Examples/007/evenodd.en.html

    The current_page_item class will need to be handled separately – possibly by using something like li:nth-child(even).current_page_item and li:nth-child(odd).current_page_item to cover both eventualities. But so check the results across a good range of common browsers as this the odd and even selectors may not be supported across them all.

    ESMI – Thanks so much for the reply.

    If the ‘current page’ class in WordPress is the bigger problem, is there a way to remove/disable that within the theme – because honestly, they don’t need it.

    Going to read your link now.

    esmi

    @esmi

    Forum Moderator

    No – there isn’t.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Top nav, add alternating image after each nav (li img 1, li img2, li img1)’ is closed to new replies.