Using the search box in different theme?

This can be done with media queries. I.E.

@media only screen and (min-width: 0px) and (max-width:760px){
.class {
	style-name:style;
}
}

Just set the min a max widths to the screen size you’re trying to target. You can do as many as you need. Just replace the .class with your class or id and style with your new styles, like any other css.

Of course … I got so used to getting help so I forgot to think (!)
Problem yet again resolved. Cheers ??

No problem, glad to help.

If anyone is still listening I would like to hijack this thread quickly. I am using WooCommerce and TwentyThirteen and want to add post-type to the search box.

This is what I want to add:
<input type="hidden" name="post_type" value="product" />

However, search.php doesn’t contain the definitions for the search function. I couldn’t find it in search.php either. Where can I modify the form <?php get_search_form(); ?> is calling?

Never mind. Adding searchform.php and following the official instructions for creating the form solved my problem.

Hi

I found this post because I would like to incorporate the search bar from twenty thirteen theme in my child theme based WP Advocate.

I have inserted the following code into my header.php file.
<?php get_search_form(); ?>

and I have updated the style.css on the child theme with the things that I want to overwrite on the original theme. I also copied the image files from the twenty thirteen theme.

@import url("../wp-advocate/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

/* Remove Text display on home page */
.home .entry-title {
	display: none;
}

/* Mystickymenu */
.myfixed {background-image: none !important;}

/* Change Transparent image on theme */
#inner-header-wrap {
		background-image: url(library/images/trans-b2.png);
	}

/* Search bar in menu from Twentythirteen theme */

.menu-main-container {
    background-color: #2B2139;
    float: left;
}
#search-form {
    float: right;
    margin-right: 20px; /* to match your other right gutters */
    background-color: #2B2139; /* if you want the purple across the bar */
}
#site-search {
        background-color: transparent;
	background-image: url(images/search-icon-white.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 20px; /* if you want the input box the same size as the bar */
	margin: 0;
	padding: 0 0 0 34px;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition: width 400ms ease, background 400ms ease;
	width: 0;
}
#site-search:focus {
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-color: #fff;
	cursor: text;
	outline: 0;
	width: 230px;
}

But my page doesn’t display the spyglass icon or hide the text input field. I the the standard search field with the standard search button.

Please could somebody help me to sort this out.