Adjusting width of drop down in custom menus and changing background color.

  • Author
  • #1261018


    I would like to adjust the width of my custom menu drop downs. As you can see several titles become 2 lines because the drop downs are too narrow. Additionally, I would like to change the background color of the drop down menu.

    My blog is:

    My theme is vigilance with the customization upgrade.

    Thank you!

    The blog I need help with is



    You can make these CSS changes:

    For the menu width, add this to your custom CSS:

    #nav ul ul li {
    min-width: 130px;

    (adjusting the number to where you need it to be. 120px was enough for “Upcoming Events” to no longer break).

    To change the background color of the drop down, and only the drop down, add this:

    #nav .children li, #nav .sub-menu li {
    background: #000;

    Replace #000 with the hex value of the color you’ll like to use.

    As a reminder, here is how to edit the CSS on



    @nicolephinney, one thing to keep in mind is that browsers all render things a little differently, so it could be that some browsers might still show it as two lines. It also depends on the zoom level and how people have their browsers configured. Some people may set their minimum font size larger than what is normal. In those cases the lines in the sub menus may still show up on two lines.



    We have Hawaiian weather here on the coast. I’m ♥ ing it. :)


    Timethief, congratulations on the weather. It is hot here in Austin. I have to get used to that as it will get even hotter within a month and I’ll be spending a lot of time in the AC comfort of our home. :)

The topic ‘Adjusting width of drop down in custom menus and changing background color.’ is closed to new replies.