Second "rollover" arrow shows with two-line menu description

  • Pseudonym


    First of all, let me say thanks for creating such a fantastic theme. I’m new to WordPress, but not to web design, and this theme made it really easy to add all the little tweaks I wanted. So thank you!

    The only issue I have is this:


    When you add a multi-line description to the menu, you can see the second rollover image at the bottom. I assume this is because of its placement in the sprite_master.png file.

    What is the best way of fixing this? I don’t really want to start changing the sprite, and then all the CSS that goes with it. That’s a hassle, and it would break as soon as I update the theme. So is there a clever bit of CSS trickery that would fix this?



    Link to your site?



    It’s still on the development server, but you can see it at


    Kenneth John Odle

    it would break as soon as I update the theme

    Not if you use a child theme. (Although if the sprite images changes, then it would.)

    Simple solution: Use a one-line description, either by shortening the description or changing the width of the menu item.

    Yeah, I know, I don’t like that solution either.

    Almost as simple solution: create a separate sprite image consisting of a single down arrow, and use that for the background of the menu item in question.

    Think kind of defeats the purpose of using a sprite image, but the image you create would probably be around 1k in size or less, and wouldn’t impact site performance.



    Thanks Kenneth. I’ve created a second sprite image and it’s working nicely. Hopefully it’s update-proof too!

    The only other problem I’ve discovered (and it may be totally unrelated) is when hovering over the menu in IE9. For some reason the coloured gradient is all screwed up. It should look like the colours above. Instead, on IE9 it looks like this:


    Hideous, isn’t it?! I don’t know where that’s coming from. As far as I know, I’ve never used that shade of blue at all! Any thoughts?


    Kenneth John Odle


    I’ve seen this color come up in IE9 on some other sites and have no idea where IE is getting it from.

    You know what they say….IE 9, Users 0.



    OK, here’s how I’ve solved it…

    <!--[if IE]>
    #header-menu > li:hover, #header-menu > li.current-menu-item, #header-menu > li.current-menu-ancestor {
    background: #c2dbe9 !important;
    filter: none !important;

    That gets put in the Graphene Theme Options > Advanced > Custom header tags. It replaces the gradient with a solid colour. It’s a bit rough, but it does the job. 🙂


    Kenneth John Odle


    IE 9, Users 1

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.