• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing display of LONG dropdown menu

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing display of LONG dropdown menu

This topic is: resolved

Tagged: Agency, css, tapestry

  • This topic has 11 replies, 2 voices, and was last updated 8 years ago by Joe Siegler.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 28, 2015 at 11:56 am #154002
    Joe Siegler
    Participant

    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
    May 29, 2015 at 7:27 am #154092
    SavvyJackie
    Member

    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. 🙂

    May 29, 2015 at 9:21 am #154102
    Joe Siegler
    Participant

    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?

    May 29, 2015 at 9:23 am #154104
    SavvyJackie
    Member

    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. 🙂

    May 29, 2015 at 9:26 am #154105
    Joe Siegler
    Participant

    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

    May 29, 2015 at 9:33 am #154107
    SavvyJackie
    Member

    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. 🙂

    May 29, 2015 at 9:35 am #154109
    Joe Siegler
    Participant

    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. 🙂

    May 29, 2015 at 9:39 am #154111
    SavvyJackie
    Member

    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. 🙂

    May 29, 2015 at 9:40 am #154113
    SavvyJackie
    Member

    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. 🙂

    May 29, 2015 at 9:40 am #154114
    Joe Siegler
    Participant

    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. 🙂

    May 29, 2015 at 9:42 am #154115
    SavvyJackie
    Member

    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. 🙂

    May 29, 2015 at 9:53 am #154123
    Joe Siegler
    Participant

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

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble