Twenty Twelve Menu Misbehaves With Spaces Sometimes

[Ipstenu]

From ​http://wordpress.org/support/topic/twentytwelve-nav?replies=13

When adding a ? to the end of a menu item name, it kicked the ? to a second line.

This was reproduced with any single char as the last thing on a menu.

​http://cl.ly/image/2B0R3A2x2R22

Changing this:

        .main-navigation li a,
        .main-navigation li {
                display: inline-block;
                text-decoration: none;
        }

to this

        .main-navigation li a,
        .main-navigation li {
                display: inline;
                text-decoration: none;
        }

fixes it (credit mindctrl)

Attaching patch.

CSS tweak for twentytwelve menu (credit mindctrl)

This needs some more work. The change from inline-block to inline will break the submenus: ​http://cl.ly/Jtqy

@Ipstenu Thanks for the ticket. :)

I fully agree this needs much more testing before we can apply this change, since it breaks other (possibly more crucial) things.

Can someone test this:

.main-navigation li a,
.main-navigation li {
    display: inline;
    text-decoration: none;
}

.main-navigation ul.sub-menu li {
    display: list-item;
}

It seems that the change mentioned in my previous comment, which seems to fix it in Chrome, breaks it in Firefox.

Since the patch didn't work the ticket needs-patch.

The style.css.diff patch seems to be working. Let me know if you see any issues with it.

Could not reproduce the original bug in Chrome 22 neither in Windows XP nor in Mac OS X.

It's working now on ​http://trunk.elftest.net/ so something in the latest seems to have fixed it.

Replying to Ipstenu:

It's working now on ​http://trunk.elftest.net/ so something in the latest seems to have fixed it.

When I put a space between Parent and ? in Chrome 22, it still breaks. style.css.diff​ seems to be working though.

Replying to obenland:

Replying to Ipstenu:

It's working now on ​http://trunk.elftest.net/ so something in the latest seems to have fixed it.

When I put a space between Parent and ? in Chrome 22, it still breaks. style.css.diff​ seems to be working though.

That patch breaks drop-down submenu spacing.

I'm voting to leave thing as-is for now until we have a solution that doesn't break existing styles.

Fix sub-menu spacing mentioned here: http://core.trac.wordpress.org/ticket/22088#comment:13

I think applying the white-space: nowrap; to just the .main-navigation li a selector will do the trick. Testing it out ...

In [22296]:

Twenty Twelve: fix navigation menu behavior when a space and one single character causes newline in navigation anchor element display. Fixes #22088.

[22296] doesn't look good for long page titles like the ones from #21964.

Without nowrap: 22088.long-titles.png​. After [22296]: 22088.long-titles.2.png​.

Replying to obenland:

When I put a space between Parent and ? in Chrome 22, it still breaks.

Confirmed in Chrome 22 on Mac OS X (before [22296]). Could not reproduce on Windows.

22088.2.patch​ fixes comment:16 by resetting white-space for child menus.

Replying to SergeyBiryukov:

22088.2.patch​ fixes comment:16 by resetting white-space for submenus.

Thanks, confirmed this fixes the long words not breaking as expected.

In [22297]:

Twenty Twelve: additional rule needed for nav menu style change in r22296, to allow long words to break in submenus. Props SergeyBiryukov, closes #22088.