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 18 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: obenland18 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 lancewillett18 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.

mindctrl18 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 (before [22296]). Could not reproduce on Windows.

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

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.