Width of search-form input

  • Resolved wpjap

    (@wpjap)


    8 years, 2 months ago

    Hi.
    When clicking on the search icon in the main menu the menu area wraps because the search field expands for text input, making my menu wider than the site width allows.

    Is it possible to define the width of the expanding input field, making it norrower? That would work because it’s just a few pixel too wide.

    Thx.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Tomas Mackevicius

    (@tomasm)

    8 years, 2 months ago

    Hi, if you would look at style.css and find:

    .site-header .search-form [type="search"]:focus,
.site-header .search-form [type="text"]:focus {
	background-color: #f5f5f5;
	border: 1px solid #bbb;
	box-shadow: none;
	cursor: text;
	outline: 0;
	width: 230px;
	width: 16.428571429rem;
}

    You can change the width properties. At the top of style.css you will find how to calculate REM. Then you can paste this whole CSS code block into some kind custom CSS plugin, new WP version has it built in into customizer:

    https://codex.ww.wp.xz.cn/CSS#Custom_CSS_in_WordPress

    Thread Starter wpjap

    (@wpjap)

    8 years, 2 months ago

    Thanks, Tomas, that worked!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Width of search-form input’ is closed to new replies.