WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 weeks ago

#40398 closed defect (bug) (fixed)

Twenty Eleven: Searchform collides with menu on small screens

Reported by: fedepia Owned by: SergeyBiryukov
Milestone: 5.9 Priority: normal
Severity: normal Version: 4.7.3
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description

Hi guys, I'm using WordPress 4.7.3 and my site is:
http://www.xn--cabaalamiranta-tnb.com/

I'm using the theme twenty eleven and the problem I have is that the menu links work well on a web version but some links are not working on mobile.

If you go to my site above, all links are working, however if you enter in the site using a mobile device both links Servicios and Ubicacion the links are shown as text and they are not clickable.

Do you know how to fix this?

Attachments (2)

twenty-eleven-searchform.png (247.1 KB) - added by Soean 5 years ago.
Screenshot
40398.diff (408 bytes) - added by sabernhardt 5 weeks ago.
set height for searchform when image is added

Download all attachments as: .zip

Change History (8)

@Soean
5 years ago

Screenshot

#1 @Soean
5 years ago

  • Component changed from General to Bundled Theme
  • Focuses ui accessibility removed
  • Keywords needs-patch added
  • Summary changed from Twenty Elevent menu does not render links on mobile to Twenty Eleven: Searchform collides with menu on small screens

Hello @fedepia, welcome to WordPress Trac!

I can reproduce the bug, if I hide the site title and tagline in twenty eleven. The searchform now collides with the menu on small screens. (See screenshot)

Adding height: 32px to #searchform solves the problem.

#2 @fedepia
5 years ago

@Soean, thank you very much for troubleshooting this.

I there any way to hide the search form completely rather than modifying the css? There are some components I want to hide like the search form, comments, publish date, etc.

If I can hide that, it would be better than edit the css

#3 @lukecavanagh
5 years ago

You can hide the search form on the front-end in Twenty Eleven just using say this CSS.

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 7.6%;
	display: none;
	text-align: right;
}

@sabernhardt
5 weeks ago

set height for searchform when image is added

#4 @sabernhardt
5 weeks ago

  • Focuses css added
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 5.9

With the header image, the search form has a bottom value of -27px. On smaller screens, the top is changed to 1.625em and the height stretches to fit.

The patch gives the form a height of 32px, since the inner dimensions are set already.

Last edited 5 weeks ago by sabernhardt (previous) (diff)

#5 @mukesh27
5 weeks ago

  • Keywords commit added

40398.diff looks good to me @sabernhardt

Mark as commit

#6 @SergeyBiryukov
5 weeks ago

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

In 51807:

Twenty Eleven: Set a fixed height for search form when header image is added.

This ensures that the search form does not collide with the menu on smaller screens.

Props sabernhardt, fedepia, Soean, lukecavanagh, mukesh27.
Fixes #40398.

Note: See TracTickets for help on using tickets.