SlideOut Search bar

Hey Joe,

I added some hover css so that the magnifying glass would turn white when moused over. The only issue I have now is that the white version wants to jump down with the search box and it’s “underneath” the search box there if you keep your mouse in that general area. I don’t know if you know how to fix that but if not, that’s okay.

Here is the code I have in (I put it in right after the “before” section of code)

.bop-nav-search :hover {
  display: block;
  content:" ";
  background-color: transparent;
  background: url("https://howehealth.com/dev1/wp-content/uploads/2016/01/search_white.gif");
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  width: 30px;
  height: 30px;
  margin: 0 0 -29px 0;
}

I’m thinking that maybe hover isn’t the right term to use… maybe I’ll try it with “enabled” instead. What do you think?

Thanks again,
Sam

Here is what it looks like when I hover and then click on the search:
https://prntscr.com/9pcy6f

Basically, I need to find a way to keep the white hover image from dropping down or I need to find a way to “hide” it. Hmm.

Hi Joe,

I hate to bother you again but just realized that now that I have the search bar how I want it (other than getting a background behind the drop down portion of it), it doesn’t work in Safari. It just isn’t clickable at all. Works like a charm in IE, Chrome and FF though. Strange. I’m guessing I need to add some webkit instructions to it?

Hi Sam,

Your first issue is that you’re doing far too much css. CSS works using the idea of a cascade, that is properties assigned lower down in the file overwrite properties written higher up, e.g.,

.myclass {
  propA: 1;
  propB: 1;
  propC: 1;
}

.myclass:hover {
  propA: 2;
}

.myclass{
  propB: 3;
}

In this case, when no mouse over, elements with the attribute class=”myclass” will have the properties propA as 1, propB as 3, and propC as 1. When the mouse is over the element, propA is 2, propB is 3, and propC is 1.

Hence, as you just want to change the image being used as background on hover (in the before content), you just want the css:

.bop-nav-search:hover::before  {
  background-image: url(white-image-url);
}

to be put in after the not on hover stuff. Example.

In terms of safari, I can’t really help you. You could do some browser detection stuff (probably js) and come up with a different set up for safari; you could try using the z-index property as it sounds like the ::before content is possibly coming in over the top of the ordinary content; or, you could abandon safari as the worst browser in the world (I mean this – I would posit that modern day safari is worse than IE ever was).

Cheers,
Joe

Hi Joe,

Thank you for your advice; I shorted the before hover code as you suggested. I should have known better than to repeat all of that code when it wasn’t necessary. So, thank you for pointing that out. It’s fixed ??

I’ll check out the js and the browser detection stuff and see what I came up with.

Honestly, I don’t ever use Safari. Even my Mac using brother doesn’t. And seriously who still uses IE… I did notice that my “Search” text for the placeholder doesn’t show in IE but I don’t care. =D However, someone else mentioned the Safari issue to me so that’s why I was pursuing it. I could decide to not care but I’ll give it one last go and see what I can come up with.

Thanks again! I really appreciate your expertise.

I want to say your search plugin is brilliant, I truly do. But one look at the attached image of my broken menu and the huge search widget, and you will see why I cannot – yet – join the chorus of praises.

I am attempting you use your plugin in a WP genesis framework site

Menu Pic

(DavidBrickley.com is not the site)

The menu items have completely dropped down out of the black bar.

The odd thing is that when I deactivate the plugin, the search icon and word “Search” appear correctly in the menu.

Any thoughts?

David

Hi Brickley,

Sorry to hear you’re having trouble.

I’m quite surprised at how far your instance is from fitting. Usually themes’ search forms are close enough in design to the menu that this isn’t such an issue.

The cure to what ails your site is some css. Use dev tools (normally f12 in your browser) to trial changes to your css and then add those changes to the bottom of your theme’s style.css. Or, if your site uses a third party theme and it offers a place for custom css in the admin area, add it there. Or, if you have to, you could add a custom css plugin and use that to add your changes.

I can’t say what the css changes you need are as these vary massively from theme to theme and site to site.

Also, if you have a look through a lot of the support questions, there are a number who’ve had similar issues that could help you.

Hope this helps. Let me know if you need further assistance.

Cheers,
Joe