Width of Submenu Items

  • When I create an entry for a menu from the main menu bar, a structure with an additional submenu is created like so:

    <ul id="menu-main-menu" class="menu">
    <li id="menu-item-553" class="menu-item ...">
        <a href="...">About us</a>
        <ul class="sub-menu">
            <li id="menu-item-693" class="menu-item ...">
                <a href="...">Our tremendous Board of Directors</a>
            </li>
        </ul>
    </li>
...
</ul>

    In this example the new menu item has a longish title, which is unceremoniously wrapped at the end of 200 pixels. This is due to a CSS rule:

    .main-navigation ul ul a {
    width: 200px;
}

    I could of course redefine this CSS rule to a width of 300px in order to avoid wrapping. However, the rule selects all submenus, so all submenus would be 300px wide, even if there were no items longer than 150px in it.

    So, is there anything that can be done to select just specific menu items, so that the width of each submenu can be set independently?

    • This topic was modified 4 years, 8 months ago by ulim.
    • This topic was modified 4 years, 8 months ago by ulim.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @ulim,

    Thank you for reaching out.

    There is a way to select a specific submenu item and I will show you how:

    1. Access your Google Chrome DevTools console.
    2. Find the sub-menu item you want to select.
    3. Right-click on it and choose Copy->Copy Selector – https://prntscr.com/t38pqk
    4. Use this CSS selector in the Theme Customizer.

    This way, you will select this specific sub-menu item and you can adjust the width per your needs.

    I hope this works for you.

    Best Regards,
    Pavle

    Thread Starter ulim

    (@ulim)

    Hello @gdpavle,

    many thanks for your tip. It gave me this selector:

    #menu-item-693 > a

    Now I wonder whether that ID will be stable. Wouldn’t there be the possiblity of WordPress re-generating those IDs if I shuffle the menu items around?

    Kind regards,
    Ulrich

    Hey @ulim,

    You’re most welcome!

    Unfortunately – yes, if you shuffle the menu items, the ID will change.
    That’s why it is good to arrange it before adding any CSS.

    Best Regards,
    Pavle

    Thread Starter ulim

    (@ulim)

    I found a good way to do this. It is possible to add CSS classes to menu items in WordPress: https://www.lockedownseo.com/add-css-classes-to-menu-items-in-wordpress

    Then it’s easy writing CSS that targets only a specific menu item, regardless of its technical id.

    Kind regards,
    Ulrich

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Width of Submenu Items’ is closed to new replies.