Dropdown menu item width is limited 323 by 58 px without rolling on other "sprites"

Greybox
September 4, 2013 at 5:00 pm #8070
I posted this bug on WordPress web site, but nobody replied.

I run into a problem while changing the dropdown menu item width. When setting it greater than 340, I start seeing the part of grey icons of a man, dollar sign and the equal sign on the left side (Creative Commons license logo). I identified the image as a part of wordpress/wp-content/themes/graphene/images/sprite_master.png. The greater the width, the more of the image is exposed.

I also noticed that if the height of my dropdown menu item happens to be greater than 58px, I start seeing a part of the cube (belongs to the photo camera sprite), and if the height is greater than 60px, I start seeing the negative “>” symbol.

After a little bit of digging it seems to be a mapping problem in style.css:
```
#header-menu ul li.menu-item-ancestor > a {

/*	background: url(images/sprite_master.png) -652px -194px no-repeat transparent; */

padding-right: 25px;

width: 165px;

}
```
and maybe the way to resolve this would be to edit sprite_master.png or use a separate png file. Otherwise the biggest area the menu item can take is about 323 by 58 px without rolling onto other “sprites”.

Thank you.
Mod

Kenneth John Odle
September 4, 2013 at 10:44 pm #40245

This is not really a bug, it’s just that everything has a physical limit. You can’t put 10 liters of water in a 5-liter bucket.

If you must have menus that wide (and frankly, that seems pretty wide to me, but I can imagine there are times it’s necessary) then your best bet is to use a child theme and a custom sprite image for the menu items. A bit of work, but manageable.

Mod

Kenneth John Odle
September 4, 2013 at 10:48 pm #40246

Quote:

I posted this bug on WordPress web site, but nobody replied.

I didn’t see this in the WordPress forum. Did you make sure to post it in the Graphene support forum here?

http://wordpress.org/tags/graphene

Greybox
September 4, 2013 at 11:52 pm #40247

Why can’t a separate png file be used to extend the limits, like I pointed out in my first message? (This is what did to work around this problem)

It appears my WP post is not in the right place, sorry.

http://wordpress.org/support/topic/wierd-problem-with-dropdown-menu-item-width-greater-than-340

Greybox
September 15, 2013 at 5:33 am #40248

Bump…

Mod

Kenneth John Odle
September 15, 2013 at 2:37 pm #40249

Quote:

Why can’t a separate png file be used to extend the limits, like I pointed out in my first message?

You can, but this will require using a child theme.

Doing that by default defeats the purpose of using a sprite image, especially since most people don’t use menus that wide.

Anonymous
September 15, 2013 at 3:38 pm #40250

Aren’t you using latest version of Graphene? Graphene 1.9.2 uses Genericons for dropdown menu indicator. So, the menu item width/height shouldn’t be an issue now.

Greybox
September 16, 2013 at 5:03 am #40251

Quote:

Aren’t you using latest version of Graphene? Graphene 1.9.2 uses Genericons for dropdown menu indicator. So, the menu item width/height shouldn’t be an issue now.

I updated to 1.9.2 and the problem has gone. Thank you for the tip and many thanks to Syahir for his hard work!