How to make a search Image actually work

I want to make this image right here



Actually work like a search bar, I know it requires coding, mind helping me out?

Hi @Zed is Not Dead,

That should be pretty easy, just need the magnifying glass and search image. Where would you want it inserted, though ?

on the nav bar the overall nav bar will look like this

Oh I see, add the following CSS to your stylesheet :

Code:

#navbar-search {
  position:relative;
  display:inline-block;
  opacity:1;
}
#nav-search-box, #nav-search-button { position:absolute }
#nav-search-form { display:inline }


#nav-search-box {
  color:#FFF;
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  top:17px;
  left:14px;
  width:172px;
  height:20px;
  padding:3px;
}

#nav-search-button {
  background:transparent;
  border:1px solid transparent;
  width:100px;
  height:40px;
  top:12px;
  right:16px;
}

Then go to Modules > JavaScript codes management and create a new script with the following settings.

Placement : In all the pages

Code:

$(function() {
  var search = document.getElementById('i_icon_mini_search'), form;

  if (search) {
    form = document.createElement('FORM');
    search = search.parentNode;
    search.id = 'navbar-search';
    search.onclick = function(e) { e.preventDefault() };

    form.method = 'get';
    form.action = '/search';
    form.id = 'nav-search-form';
    form.innerHTML = '<input id="nav-search-box" type="text" name="search_keywords"/><input id="nav-search-button" type="submit" value="" onclick="this.parentNode.submit();"/>';

    search.appendChild(form);
  }
});

It should add a transparent input and button over the navbar image.

thanks! this is solved

You're welcome ^^

Topic archived

Have a great day.