Title: Drop Down Navigation Width
Last modified: August 22, 2016

---

# Drop Down Navigation Width

 *  Resolved [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * (@sophiefire13)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/)
 * Hi,
 * I am working on this site: [http://myoga.com/newsite/](http://myoga.com/newsite/)
 * With the Twenty Twelve Theme.
 * I would like the drop down menu width to be sized relative to the text in it.
   At this time it seems like all of the drop downs are the same width.
 * Also, can you tell me how to change the hover color of the main menu items as
   well as the drop down items?
 * Thanks you for your help! I so appreciate your time.
 * Brittany

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Marin Atanasov](https://wordpress.org/support/users/tyxla/)
 * (@tyxla)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611364)
 * Hi Brittany,
 * The above appear to require some CSS modifications done to the theme. You can
   do that either in a child theme, or in a CSS modifications plugin. Modifying 
   the twenty twelve theme itself is not recommended, as you could lose any changes
   if you update the theme.
 * 1. If you need the width of the navigation dropdown menus to vary based on the
   length of the menu items, you can use the following CSS:
 * `.main-navigation li ul li a { width: auto; white-space: nowrap; }`
 * 2. If you want to change the hover text color of the main menu items, you should
   use the following code:
 * Top level items (use your preferred color instead of “blue”):
    `.main-navigation
   li a:hover { color: blue; }`
 * Sub level items (use your preferred color instead of “blue”):
    `.main-navigation
   li ul li a:hover { color: blue; }`
 * Good luck and have fun.
 *  Thread Starter [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * (@sophiefire13)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611430)
 * tyxla,
 * Thank you so much for your help! I have a CSS mod plugin- thanks for making sure.
 * The first code to change the width didn’t work. I tried using the !important 
   tag too. Any other ideas?
 * The second part worked beautifully. Awesome!
 * Thank you so much for all your help. I really appreciate it!
 * Brittany
 *  [Marin Atanasov](https://wordpress.org/support/users/tyxla/)
 * (@tyxla)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611445)
 * Hi Brittany,
 * You should make sure that the CSS rule is added to the bottom of your custom 
   CSS, because some other older rules are overriding this new rule.
 * Also, just to be sure, you can remove the following rules from your older custom
   CSS:
 * `width: 180px; width: 12.85714286rem;`
 * Glad I could help.
 *  Thread Starter [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * (@sophiefire13)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611471)
 * Tyxla,
 * Thank you so much for this tip. Adding the code at the end of the CSS made all
   the difference!
 * Now my only question is how can I get the text in the drop down menu to be left
   justified instead of centered?
 * Thank you!
 * Brittany
 *  [Marin Atanasov](https://wordpress.org/support/users/tyxla/)
 * (@tyxla)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611474)
 * Hi Brittany,
 * You could try with:
 * `.main-navigation li ul.sub-menu { text-align: left; }`
 * Good luck there.
 *  Thread Starter [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * (@sophiefire13)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611482)
 * Tyxla,
 * That worked perfectly!
 * I cannot thank you enough for all your help!
 * All the best to you.
    Brittany
 *  Thread Starter [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * (@sophiefire13)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611483)
 * Ooh, Tyxla, man with all the answers! One last question…
 * When I did that I noticed that under the “Resources” menu the first 4 items got
   squished a bit, so there are two per line.
 * Any ideas on how to fix that?
 * Britt
 *  [Marin Atanasov](https://wordpress.org/support/users/tyxla/)
 * (@tyxla)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611484)
 * Hey Britt,
 * Feel free to add the following to your CSS:
 * `.main-navigation li ul li { display: block; }`
 * Cheers,
    Marin
 *  Thread Starter [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * (@sophiefire13)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611485)
 * Marin, you are the best. Totally worked. No surprise there 🙂
 * Thank you, thank you!
    Brittany

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Drop Down Navigation Width’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [drop-down](https://wordpress.org/support/topic-tag/drop-down/)
 * [hover color](https://wordpress.org/support/topic-tag/hover-color/)
 * [main menu](https://wordpress.org/support/topic-tag/main-menu/)
 * [menu width](https://wordpress.org/support/topic-tag/menu-width/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 2 participants
 * Last reply from: [sophiefire13](https://wordpress.org/support/users/sophiefire13/)
 * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/drop-down-navigation-width/#post-5611485)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics