Changing display of LONG dropdown menu

[Joe Siegler]

If you go to my site here:

http://www.rangerfans.com

I just switched to "Agency Pro" from Tapestry. I'm writing about the "Uniform Number" category. When I was running Tapestry I had some code in the CSS to stop the drop down menu from dropping ALL the way down. If you look at it in Agency Pro, you'll see wahat I mean. It just goes DOWN because I have 80+ submenu items there.

Here's what it looked like in Tapestry: http://www.rangerfans.com/sitemenu.png

I want to get the dropdown to do the same thing in Agency Pro. The css code I had in there for that isn't working in Agency Pro. Can someone direct me to the right code that will do the same thing?

Danke. Here's the code in question:

#extended-categories-2 select{width:100%;height:29px;padding:4px;margin-top:10px;border-color:#2c5968;border-style:solid;border-width:2px;}
#wp-category-archive-2 select{width:100%;height:29px;padding:4px;margin-top:10px;border-color:#2c5968;border-style:solid;border-width:2px;}

http://www.rangerfans.com

[SavvyJackie]

Hi Joe,
Try adding a custom class to the Unif Number menu item - in my example I used "uniform"

Then add this css at the end of your site navigation section in your style.css

.genesis-nav-menu .uniform .sub-menu {
	background-color: #282828;
	border: none;
	width: 320px;
	text-align: left;

}

.genesis-nav-menu .uniform .sub-menu a {
	width: 40px;
	text-align: center;
       padding: 12px;
       font-size: 12px;
       margin-left: 15px;
}

That should take care your desktop view. For mobile you'd have to do something similar in the @media queries section.

Hope that helps.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Joe Siegler]

Thanks for the help with that. One question though, it's regarding this bit..

Try adding a custom class to the Unif Number menu item – in my example I used “uniform"

How?

[SavvyJackie]

Go to Appearance -> Menu and then edit that menu. Click on Unif Numbers menu item. you should see a place there to enter a

CSS Classes (optional)

Enter uniform there.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Joe Siegler]

That was my thought. But I don't see anything like "CSS Classes". Here's what I'm seeing.

http://www.rangerfans.com/images/menus.png

[SavvyJackie]

So sorry, check the Screen Options in the upper right corner. Make sure CSS Classes is checked. You should be good to go then. 🙂

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Joe Siegler]

Ah yeah, that did it. OK, tkx. If you refresh you can see it.

I might still try and make it shorter, as it still goes down a lot there. 🙂

[SavvyJackie]

you can, just increase the width from 320 to 400 and see if that helps.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SavvyJackie]

you can reduce padding and make font smaller to cramp more on one line too.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Joe Siegler]

Oh, I plan to. Your code was pretty clear to follow, just have to find some time to play with it. Now isn't the time, unfortunately. 🙂

[SavvyJackie]

My pleasure. I love baseball and I am from Texas.

Please mark this topic as resolved.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Joe Siegler]

OK, I changed it. Made it wider, and reduced the padding by two pixels. I think it still works pretty well. 🙂

[Author]

Posts