WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#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 3 years ago.
CSS tweak for twentytwelve menu (credit mindctrl)
style.css.diff (578 bytes) - added by mindctrl 3 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 3 years ago.
22088.long-titles.2.png (6.2 KB) - added by SergeyBiryukov 3 years ago.
22088.2.patch (441 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (25)

@Ipstenu3 years ago

CSS tweak for twentytwelve menu (credit mindctrl)

comment:1 @nacin3 years ago

  • Component changed from Themes to Bundled Theme

comment:2 @ocean903 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

comment:3 @ocean903 years ago

  • Description modified (diff)

comment:4 @lancewillett3 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.

comment:5 @lancewillett3 years ago

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

comment:6 @mindctrl3 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;
}

comment:7 @mindctrl3 years ago

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

comment:8 @ocean903 years ago

  • Keywords needs-patch added; has-patch removed

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

comment:9 @mindctrl3 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.

comment:10 @SergeyBiryukov3 years ago

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

comment:11 follow-up: @Ipstenu3 years 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: @obenland3 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.

comment:13 in reply to: ↑ 12 @lancewillett3 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.

@mindctrl3 years ago

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

comment:14 @lancewillett3 years 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 @lancewillett3 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.

comment:16 @SergeyBiryukov3 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.

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

@SergeyBiryukov3 years ago

comment:18 follow-up: @SergeyBiryukov3 years ago

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

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

comment:19 in reply to: ↑ 18 @lancewillett3 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.

comment:20 @lancewillett3 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.