Using the search box in different theme?

That’s actually CSS :focus pseudo class, and also with CSS3 transition for the slide out effect. You can take a look at theme stylesheet directly, see how it works and apply it to your own.

I wanted to do this for myself and figured it out but for some reason it doesn’t work well in safari. That’s also true of the twenty thirteen theme. The icon is way off of the right side. Does anyone know why this is and how to fix it?

@metteonline you need to find out the class of your search input. Use firebug for this. Mine was .search-input yours could be too, but check.

The css for it is:

.search-input {
	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: 30px;
	margin: 0;
	padding: 0 0 0 34px;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition: width 400ms ease, background 400ms ease;
	width: 0;
}
.search-input: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;
}

Again, just make sure it’s targeting your search input class. And if you want a custom search icon make sure you name it the same or change the image name above. Also make sure you don’t have another css rule defining the width of your input.

Hope this helps and if anyone knows a fix for safari that would be great.

The thing is, I don’t even know how to place the search box in the navigation bar (!) If I managed, I will try your css. Thanks.

btw, you didn’t provide a link to your site, but on my devices the search icon in Twenty Thirteen looks the same on all browsers (including Safari)

To put it into the nav bar, you’ll need to open up header.php, find where the nav bar is and add:
<?php get_search_form(); ?>

You could wrap it in a div like this:
<div id="search-form"><?php get_search_form(); ?></div>
to have more control over it.

By the way the twenty thirteen icon does look the same in safari, it’s the positioning of it that is off. When the search is opened it moves to the right place but when it’s closed it does a weird jump. Hope this helps.

Make sure than any changes to theme files are made ONLY in a child theme – https://codex.www.ads-software.com/Child_Themes – otherwise they will be overwritten when WP is updated. It’s also imperative to have an unmodified copy of the default theme for troubleshooting purposes.

@sscalifornia

In my header.php I can place the search box anywhere but within the navigation bar. I don’t know if it is some css that’s causing this …

If you have the time, can you tell me where exactly to place it?
The code for my nav bar is:

<nav id="site-navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'magazine-basic' ); ?></h3>
<a class="assistive-text" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'magazine-basic' ); ?>"><?php _e( 'Skip to content', 'magazine-basic' ); ?></a>
<?php echo str_replace ( '</li>', '', wp_nav_menu( array( 'theme_location' => 'primary', 'echo' => false ) ) ); ?>
</nav><!-- #site-navigation -->
<nav id="site-sub-navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Sub menu', 'magazine-basic' ); ?></h3>
<?php echo str_replace( '</li>', '', wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'secondary-menu', 'echo' => false, 'fallback_cb' => false ) ) ); ?>
</nav><!-- #site-sub-navigation -->

Thank’s for your patience.

– and yes, I’m doing it in my child theme ??

Without being able to see it and not knowing where you want it to show up in the bar, I would say you place it after the last element it the first nav. Say you want it flush right like in the 2013 theme, you could do:

<nav id="site-navigation" role="navigation">

<h3 class="assistive-text"><?php _e( 'Main menu', 'magazine-basic' ); ?></h3>

<a class="assistive-text" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'magazine-basic' ); ?>"><?php _e( 'Skip to content', 'magazine-basic' ); ?></a>

<?php echo str_replace ( '</li>', '', wp_nav_menu( array( 'theme_location' => 'primary', 'echo' => false ) ) ); ?>

<div id="search-form"><?php get_search_form(); ?></div>

</nav><!-- #site-navigation -->

<nav id="site-sub-navigation" role="navigation">

<h3 class="assistive-text"><?php _e( 'Sub menu', 'magazine-basic' ); ?></h3>

<?php echo str_replace( '</li>', '', wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'secondary-menu', 'echo' => false, 'fallback_cb' => false ) ) ); ?>

</nav><!-- #site-sub-navigation -->

#search-form{
float:right;
}

The second nav appears to be a mobile nav. Then you can use the css above on the input. If it’s not working make sure you’re targeting the right input class. Good call on the child theme by the way. Hope this helps.

Well, I’m almost giving up …
I placed the searchform exactly as you suggested. And it shows up just underneath the nav bar … – just as I tried to place it between every element of the nav in my first try but either it shows up just on top or below the navigation.

Sorry, can’t provide you a link as I can’t open the site to the public yet, and it doesn’t seem possible to attach an image of the site in this forum … Thanks anyway

Well, I hate to have you give up. I understand you not wanting to post a link here, but if you want to send me a link to your site, with your the search bar in there, on the contact form [redacted] I can take a look and try to help you further.

@sscalifornia – please keep help on these forums per
https://codex.www.ads-software.com/Forum_Welcome#Helping_Out

No worries, I’ve removed the Coming Soon mode and you can now see where the search box is placed when I put the code exactly where you suggested.

View it here

Thanks again for your help. It’s is highly appreciated.

First, your child theme style.css file should contain ONLY changes, not a copy of the entire parent theme style.css file.

Right now, none of the code in your child theme is working because of this stray code here – the wid:

wid
/* =Normalize.css v2.1.0 by Nicolas Gallagher - https://necolas.github.com/normalize.css/

Remove that and then add the margins to the CSS here:

#search-form {
    float: right;
    margin-right: 5px;
    margin-top: -33px;
}

First of all, I wasn’t taking this to a private area to discuss it. He didn’t want to post his site and I didn’t want to post my email. Secondly you don’t need to use negative margins to place the bar up there.

@metteonline here’s what you need:

.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;
}

Make sure your icon image names are the same as the ones in the css. Hope this resolves your issue and feel free to ask if you need anymore help.

Thank you guys!

I had to use some of both suggestions to make it work.
I gave the site-search a max-width so the box didn’t come on top of the navigation when viewed horisontally on a ipad.

@ WPyogi, still learning good WP habits, my child style.css is now almost clean. And I would never have found out about the stray wid code by myself. Didn’t understand why the css didn’t work on my search box.

@ sscalifornia, thanks making the animation so easy. I literally just had to copy and paste.

I’ll put the coming soon mode back on in a day or so. Until then you can view the result on the site.

I guess this topic is now resolved ??

Oh well, just as I thought everything was perfect, it is not …

Thanks to WPyogi and sscalifornia I managed to place my search box nicely in the navigation bar. But the css of #site-search of course also affect the search box in the mobile version (the site is responsive) which is really awkward.

If you guys are still there – or anyone else – do you know how to style the search box/#site-search on the desktop version seperately from the mobile version?

My site will stay open a little longer, try view the search box on a mobile device or drag the browser window.