Search icon/box in the menu for Infinity Pro

[JFG]

Hi,

Anyone aware if there's an easy way to add a search icon to the menu that triggers a search box to appear in the Infinity theme?

Thank you

[AnitaC]

Sridhar has a tutorial on creating a expandable search here. Since you didn't provide a link to your own website, it's hard to provide anything further.

---

Need help with customization or troubleshooting? Reach out to me.

[BrianBEgan]

Newbie question here, I'm afraid. I used Sridhar's excellent tutorial, including the dashicon font family hint in the comments. I did a lot of experimenting on function.php and style.css (after backing up the originals, of course). I got it working very quickly, but then went in and tried to make the search box's border visible when it replaced the magnifying glass icon. That led me down a slipperly slope.

Here's the question: Sridhar's tutorial says *what* to insert, but it doesn't specify *where*. I found out the hard way that it makes a difference. Can anyone give me some pointers about where to insert the code in function.php, and where the two css insertions should go? (Told you it was a newbie question!)

Another variable: Do I need the Search widget installed on the home page to make this work, or is Sridhar's code independent?

Many thanks,
Brian

[AnitaC]

@brianbegan it's best that you contact @sridhar-katakam about his tutorials. I think you can post a comment on the actual tutorial you are referring to.

---

Need help with customization or troubleshooting? Reach out to me.

[BrianBEgan]

Thank you, Anita. I'll do that now.

Best,
Brian

[BrianBEgan]

UPDATE: Using Sridhar's tutorial and a bunch of experimentation, I managed to get a search box working. It turns out that something has changed since the tutorial was written, and inserting the "dashicon" line suggested in the comments has no effect. The search icon appeared beautifully everywhere but on the home page, where it was present but invisible.

Instead the comment fix, I modified Sridhar's code by adding three lines to style.css:

.home .search .search-form:before {
color: #fff;
/* Add three lines copied from .search-form:before at ~line 823 in the
SEARCH FORM section. */
color: #999;
content: "\f4a5";
font-family: "ionicons";
/* End addition */
}

I also added a slight modification to make the search field's borders visible so it looks more like a place for text entry:

.search .search-form input[type="search"]:focus {
width: 250px;
outline: 0;
background-color: #fff;
cursor: text;
/* Add to make search box borders visible, and with rounded corners */
border: 1px solid #bbbbbb;
border-radius: 7px;
/* End addition */

}

I hope this helps somebody.

[Author]

Posts