Width of Dropdown Box

[acuitas 1]

Hi...I'd like to control the width of the menu dropdown boxes and add "nowrap" to the text. I don't like wrapped dropdown titles. Even with FireBug, I can't find the CSS class for this. Can someone tell me the right CSS to affect this? Thank you.

[cmunns 16]

This css should do just fine, of course you could adjust the width to however you see fit and probably have to add some padding to the right side as well ` #primary-nav ul.sf-menu ul li { white-space: nowrap; width: 100%; } `

[acuitas 1]

Thank you, cmunns. You are half right. The "nowrap" works with this CSS class, but I knew that already. The "width:100%; has no effect at all. Adding padding to the right makes a change, but it's cloojy. I would like to specify the width or make it dynamic would be better. Instead, I have to add at least 50 or 100 pixels to padding-right and that finally makes the box long enough to accommodate the current title. But if I have a longer title some time, it will not adjust to accommodate. The text will continue outside the box. Try it, you'll see. But thank you very much for your effort. Any other idea?

[acuitas 1]

Figured it out. Hope this helps someone else. Here's the css I used to make it work: #primary-nav ul.sf-menu ul.children li { white-space:nowrap; } #primay-nav ul.sf-menu ul.children li a{ width:100%; } #primary-nav ul.sf-menu ul.children { width:auto; } Seems as though all three are needed to get it to behave. Probably don't need the "children" class either, but I like to be as targeted as possible.

[bryan-hadaway 3]

Thanks Mark, just gave you your first karma point. Thanks, Bryan

[intellagentz 0]

slightly simpler method seems to work... 1) add cmunns code above 2) change #primary-nav ul.sf-menu styling width from "15em" to "auto" either way

[acuitas 1]

Carl...I don't think you have tested your solution adequately. In my test, your solution does not work. But thank you for the effort. A simpler answer would be preferable, for sure.

[intellagentz 0]

Thanks for that. It worked fine, up until the point I added a grandchild to one of the categories. Then the spacing was out of whack. Interestingly, enough when that happened, I tried your method and that too didn't work for me. I've given up on the issue.

[acuitas 1]

TRUTH IS: My solution doesn't work either. Okay, GUYS at PlatformPro who understand the CSS in this theme....how about a real answer to this, please? Question being: What CSS class does one use to make the drop down menu rows stretch to accommodate the text within, or ask the width to get bigger? I even dove into the Superfish CSS to look for the class. You have buried it very deep. Please help. Thank you .

[acuitas 1]

Okay, the solution I had posted was working until the latest upgrade of Pro, even though I didn't do anything but modify the base.css file. When I study the top of the HTML file, it looks like in the new verison of PRO that superfish's css is getting loaded into the header of the page AFTER my base.css, which means I can do nothing to change the layout settings for the menu: superfish always overrides my changes. The Platform Pro developers need to either fix superfish to not set specific widths (like 15em) on the menu items OR -- and this would be my preference -- they include the base.css file LAST so that I can make changes to the layout as I want. Could someone please let me know if there will be a fix for this? Thanks very much.

[acuitas 1]

One other thing I just thought of: I changed to using the WP custom menus after the upgrade -- so that might have made a logic change in how the css is loaded as well.

[Andrew 207]

Mark, If its loaded after, just add additional specificity to the rules you originally had working ... e.g. add `body` out front of them, etc... http://css-tricks.com/specifics-on-css-specificity/

[acuitas 1]

Andrew; Good advice. Thank you. I'm working on learning to do this better than I did before thanks to this article. Cheers.