Drop Down Navigation Width

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.

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

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.

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

Hi Brittany,

You could try with:

.main-navigation li ul.sub-menu { text-align: left; }

Good luck there.

Tyxla,

That worked perfectly!

I cannot thank you enough for all your help!

All the best to you.
Brittany

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

Hey Britt,

Feel free to add the following to your CSS:

.main-navigation li ul li { display: block; }

Cheers,
Marin

Marin, you are the best. Totally worked. No surprise there ??

Thank you, thank you!
Brittany