WordPress.org

Make WordPress Core

#22088 closed defect (bug) (fixed)

Twenty Twelve Menu Misbehaves With Spaces Sometimes

Reported by: Ipstenu Owned by: lancewillett
Milestone: 3.5 Priority: low
Severity: normal Version: 3.5
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description (last modified by ocean90)

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.

Attachments (5)

22088.patch (714 bytes) - added by Ipstenu 19 months ago.
CSS tweak for twentytwelve menu (credit mindctrl)
style.css.diff (578 bytes) - added by mindctrl 19 months ago.
Fix sub-menu spacing mentioned here: http://core.trac.wordpress.org/ticket/22088#comment:13
22088.long-titles.png (6.4 KB) - added by SergeyBiryukov 18 months ago.
22088.long-titles.2.png (6.2 KB) - added by SergeyBiryukov 18 months ago.
22088.2.patch (441 bytes) - added by SergeyBiryukov 18 months ago.

Download all attachments as: .zip

Change History (25)

Ipstenu19 months ago

CSS tweak for twentytwelve menu (credit mindctrl)

comment:1 nacin19 months ago

  • Component changed from Themes to Bundled Theme

comment:2 ocean9019 months ago

  • Keywords needs-patch added; has-patch removed

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

comment:3 ocean9019 months ago

  • Description modified (diff)

comment:4 lancewillett19 months ago

  • Milestone changed from Awaiting Review to 3.5
  • Priority changed from normal to low

@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.

comment:5 lancewillett19 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

comment:6 mindctrl19 months ago

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;
}

comment:7 mindctrl19 months ago

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

comment:8 ocean9019 months ago

  • Keywords needs-patch added; has-patch removed

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

comment:9 mindctrl19 months ago

  • Keywords has-patch added; needs-patch removed

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

comment:10 SergeyBiryukov19 months ago

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

comment:11 follow-up: Ipstenu19 months ago

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

comment:12 in reply to: ↑ 11 ; follow-ups: obenland19 months ago

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.

comment:13 in reply to: ↑ 12 lancewillett19 months ago

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.

mindctrl19 months ago

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

comment:14 lancewillett18 months ago

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

comment:15 lancewillett18 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In [22296]:

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

comment:16 SergeyBiryukov18 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

[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.

comment:17 in reply to: ↑ 12 SergeyBiryukov18 months ago

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. Could not reproduce on Windows.

Version 0, edited 18 months ago by SergeyBiryukov (next)

SergeyBiryukov18 months ago

comment:18 follow-up: SergeyBiryukov18 months ago

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

Last edited 18 months ago by SergeyBiryukov (previous) (diff)

comment:19 in reply to: ↑ 18 lancewillett18 months ago

  • Keywords needs-testing removed

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.

comment:20 lancewillett18 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.