Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing display of LONG dropdown menu
- This topic has 11 replies, 2 voices, and was last updated 9 years, 8 months ago by
Joe Siegler.
-
AuthorPosts
-
May 28, 2015 at 11:56 am #154002
Joe Siegler
ParticipantIf you go to my site here:
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:
http://www.rangerfans.com#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;}
May 29, 2015 at 7:27 am #154092SavvyJackie
MemberHi 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. 🙂
May 29, 2015 at 9:21 am #154102Joe Siegler
ParticipantThanks 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?
May 29, 2015 at 9:23 am #154104SavvyJackie
MemberGo 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. 🙂
May 29, 2015 at 9:26 am #154105Joe Siegler
ParticipantThat was my thought. But I don't see anything like "CSS Classes". Here's what I'm seeing.
May 29, 2015 at 9:33 am #154107SavvyJackie
MemberSo 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. 🙂
May 29, 2015 at 9:35 am #154109Joe Siegler
ParticipantAh 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. 🙂
May 29, 2015 at 9:39 am #154111SavvyJackie
Memberyou 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. 🙂
May 29, 2015 at 9:40 am #154113SavvyJackie
Memberyou 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. 🙂
May 29, 2015 at 9:40 am #154114Joe Siegler
ParticipantOh, 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. 🙂
May 29, 2015 at 9:42 am #154115SavvyJackie
MemberMy 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. 🙂
May 29, 2015 at 9:53 am #154123Joe Siegler
ParticipantOK, I changed it. Made it wider, and reduced the padding by two pixels. I think it still works pretty well. 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.