• Webpage: http://www.awolphoto.com

    The image for the navigation is one long image with multiple smaller images making up the one .jpg file. For whatever reason, it is repeating the first 1/5 of the image for each menu instead of just revealing the complete image as additional pages are dragged into the menu for the header. I have been going through the code to try to figure it out, but haven’t found a fix for it. Any help is appreciated.

    Here is the code from the style.css file

    [ 130 lines of code moderated. For more than 10 lines of code please use pastebin.com instead. ]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Your image is being generated on LI and not UL. You need to assign that image to that class and removed it from LI or it will repeat.

    Thread Starter evtilly

    (@evtilly)

    Thanks for the quick reply. How would I go about “assigning” that image to that class?

    Add

    #topnav {
    background: url("images/menu-a-bg.jpg") no-repeat scroll 0 15px transparent;
    }

    Remove the background line from here

    .sf-menu > li {
        background: url("images/menu-a-bg.jpg") no-repeat scroll 0 15px transparent;
        padding-top: 15px;
    }

    Thread Starter evtilly

    (@evtilly)

    Thanks! I halfway got it, how about the 2nd part for the hover?

    That’s the hard part and I’m not sure an easy way to tell you. It would probably take me 30 minutes to do it so I’m sorry but can devote that kind of time to your issue.

    But what I think you need to do is slice that image into each individual image and then make different classes so when that one is hovered over only that single pic will show. There’s probably an easier way, but I’m not sure.

    Thread Starter evtilly

    (@evtilly)

    Ok, hopefully someone else can throw in some free input.

    Thanks so much for your help.

    ^ soon as you get rid of that fatal error ;/

    First thing that I noticed was that you are missing the classes your are using to define what image to use (.m1 .m2 .m3 .m4 .m5)

    Add those to your menu items and see if that makes a difference, and we can continue from there.

    Thread Starter evtilly

    (@evtilly)

    Thanks cmmars for the reply.

    I tried to play around with it but not really sure if I am adding the classes correctly, could you give me an example in code. Not the best with CSS code terminology

    Can you paste the code from your template file that is generating this page into a pastebin so I can take a look through it? http://pastebin.com/

    Thread Starter evtilly

    (@evtilly)

    would it be possible to post the PHP file that is generating the menu as well?

    There is another option as well, but it can be a bit more upkeep in the long run, but if you go to your wp-admin section, the appearance -> menus (assuming you created the menu here), and then on the top right, select screen options, and under ‘Show advanced menu properties’, make sure CSS Classes is selected.

    Then, you can expand the options for each menu item, and add the correct class to each menu item. According to your css, the classes are m1, m2 ,m3, m4 and m5. Add these to the menu items, save the menu, and see if that gets it working.

    Thread Starter evtilly

    (@evtilly)

    Thread Starter evtilly

    (@evtilly)

    BAM! That did it cmars! Thank you so much

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Repeating Image’ is closed to new replies.