Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#22088 closed defect (bug) (fixed)

Twenty Twelve Menu Misbehaves With Spaces Sometimes

Reported by: ipstenu's profile Ipstenu Owned by: lancewillett's profile 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 12 years ago.
CSS tweak for twentytwelve menu (credit mindctrl)
style.css.diff (578 bytes) - added by mindctrl 12 years 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 12 years ago.
22088.long-titles.2.png (6.2 KB) - added by SergeyBiryukov 12 years ago.
22088.2.patch (441 bytes) - added by SergeyBiryukov 12 years ago.

Download all attachments as: .zip

Change History (25)

@Ipstenu
12 years ago

CSS tweak for twentytwelve menu (credit mindctrl)

#1 @nacin
12 years ago

  • Component changed from Themes to Bundled Theme

#2 @ocean90
12 years 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

#3 @ocean90
12 years ago

  • Description modified (diff)

#4 @lancewillett
12 years 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.

#5 @lancewillett
12 years ago

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

#6 @mindctrl
12 years 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;
}

#7 @mindctrl
12 years ago

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

#8 @ocean90
12 years ago

  • Keywords needs-patch added; has-patch removed

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

#9 @mindctrl
12 years 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.

#10 @SergeyBiryukov
12 years ago

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

#11 follow-up: @Ipstenu
12 years ago

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

#12 in reply to: ↑ 11 ; follow-ups: @obenland
12 years 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.

#13 in reply to: ↑ 12 @lancewillett
12 years 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.

@mindctrl
12 years ago

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

#14 @lancewillett
12 years ago

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

#15 @lancewillett
12 years 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.

#16 @SergeyBiryukov
12 years 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.

#17 in reply to: ↑ 12 @SergeyBiryukov
12 years 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 12 years ago by SergeyBiryukov (previous) (diff)

#18 follow-up: @SergeyBiryukov
12 years ago

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

Last edited 12 years ago by SergeyBiryukov (previous) (diff)

#19 in reply to: ↑ 18 @lancewillett
12 years 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.

#20 @lancewillett
12 years 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.