SlideOut Search bar

Hi Das,

Here is a link with fixes. You weren’t targeting the text input element and you weren’t hiding the search button (the second input element). I changed your screen-reader class to hide for non-screen-reader users and show otherwise – see this article.

Hope this helps.

Cheers,
Joe

Hey Joe,

Thanks for replying so early !
Even I found my own mistake and came back to reply. And I see you’ve done your part! ??
5 stars for your prompt response!!

Thanks Again!!

Regards,
Das

OMGoodness!
That is brilliant Guys!
Absolutely Brilliant!
Nice coding both of you!
Thank you!
telB

Thank you so much for this; I have implemented it on my site. I just need one little change though… I need it to say the word “search” when clicked in the input text box there.
Is there an easy way to add to the code? Thanks!

Hi S R,

In order to have “Search” as a placeholder in the box, your theme needs to support html5. It may do already, but see this previous support request for how to ensure that.

The trouble occurs when using the above codepen css for the slide out search bar as it is using the html4 search template. However, if you use the css I put here, that should work instead.

Cheers,
Joe

Hi Joe,

Thanks! I’m using Thesis 2.0 so I believe it supports html5 as it is fairly new. I’ll double check though. (I’m fairly confident it is.) Thank you for the updates codepen CSS… I tried it and it seemed like it was going to work but now it does this instead:
https://prntscr.com/9oszqd
I want the word “search” in the box as a placeholder and not as a submit button.

Here is my total code:

#.bop-nav-search {
	position: absolute;
	right: 20px;
	top: 20px;
}

 .bop-nav-search input[name="s"]{
	background-color: transparent;
	background: url("https://howehealth.com/dev1/wp-content/uploads/2016/01/search.gif");
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	border: none;
	cursor: pointer;
	height: 35px;
	margin: 1px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 200ms ease, background 200ms ease, border 200ms ease;
	transition:         width 200ms ease, background 200ms ease, border 200ms ease;
	width: 0;
}

.bop-nav-search input[name="s"]:hover {
	background:url("https://howehealth.com/dev1/wp-content/uploads/2016/01/search_white.gif");
	background-position: 5px center;
	background-repeat: no-repeat;
}

.bop-nav-search input[name="s"]:focus {
	background-color: #d4c19d;
border: 1px #836631(0,0,0,1);
cursor: text;
outline: 0;
width: 150px;
height: 20px;
}

.bop-nav-search input[type="search"] {
  -webkit-appearance: textfield;
}

/*Hide for non-screen-readers*/

.bop-nav-search .screen-reader-text {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.bop-nav-search .search-submit {
  display: none;
}

Hi Joe,

Here is what happens when I use the new code:
https://prntscr.com/9ot1n2

It doesn’t keep the word “search” as a placeholder but instead uses it as a submit button.

Hmmm.

I am using Thesis 2 so I believe it does support html5

Hi S R,

I can’t see the html in the link so can’t say whether it’s using the html4 or 5 template.

Either way, it appears your css isn’t hiding the submit button (that’s the last rule in the css in the codepen links and is slightly different depending on 4 or 5).

The submit button is populated by the navigation label, whereas the placeholder is set (when the theme supports html5 search forms) by editing the title attribute (shown here).

Note that not all the attribute fields necessarily show when editing menu items. In order to show them, you need to edit the screen options via the tab in the top-right of the screen.

Hope this helps.

Cheers,
Joe

Thanks, Joe!

You are referring to this rule right?

.bop-nav-search .search-submit {
  display: none;
}

I went to my menu and this is what it looks like:
https://prntscr.com/9otrnz
I added the word placeholder in there as you showed in your menu example.

Thanks again and I’ll work on it when I get home.

Sam

Yep, that’s right, that’s the css and that’s also the field for filling in a placeholder.

Let me know if you run into further issues.

Cheers,
Joe

Hmm, no luck so far with getting it to actually be the placeholder. I’m investigating to make sure the Thesis Class Responsive theme is actually supporting the html5 because that is the only thing I can think it would be at this point.

I went and added that bit of code you suggested to the plugin file:

add_action( 'after_setup_theme', function(){
    add_theme_support( 'html5', array( 'search-form' ) );
} );

Worked like a charm!
Thank you so much!!
Now, I just need to change the font to a different color and work on getting it to look like this: https://prntscr.com/9oyjtd
Basically, I need it to drop-down when clicked on/into.
Right now, it looks like this: https://prntscr.com/9oykee

Any suggestions or ideas?

Hi Sam,

This is the best I could do: https://codepen.io/anon/pen/qbjVqd?editors=110

Cheers,
Joe

Hey Joe,

This is awesome! I am fairly certain this will work for the site and I can customize it a little further to suit my tastes.
Thank you so much for taking the time to do this for me.

Sam

Cool, glad I could help.