Twenty Eleven: Searchform collides with menu on small screens

[fedepia]

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?

[Soean]

Screenshot

[Soean]

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.

[fedepia]

@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

[lukecavanagh]

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]

set height for searchform when image is added

[sabernhardt]

With the header image, the search form has a bottom value of -27. 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.

[mukesh27]

40398.diff​ looks good to me @sabernhardt

Mark as commit

[SergeyBiryukov]

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.