Keep Search Box Open

[rsae]

Yesterday in the Themeforest comments section, Ed mentioned he could provide CSS to keep the search field open (instead of having to click on it first). Can you please provide this CSS (that would also keep the search field on the same line as the search icon).

From the Themeforest comments:

mfuchs 21 hours ago Flag
Hello,

Before buying the theme I would like to know if I can make the search box for the shop visible at all times without the need to click on the loupe icon to bring it up. Please advise and thanks.

Martin
SwiftIdeas

Hi there,

Yes, we can provide some custom css to show this at all times 🙂

Hope that helps.

– Ed

[Kyle – SUPPORT]

Try adding this to your custom css:

nav .menu-search ul.sub-menu {
  opacity: 1;
}

– Kyle

[rsae]

Thanks for the prompt reply! That CSS keeps the search field open, but it overlays the text below the header/ is below the menu. Is there a way to keep it on the same line as the search icon?

[Kyle – SUPPORT]

Try adding this custom css:

.menu-search .sub-menu {
  top: 0 !important;
}
.menu-search ul li form input {
  margin: 4px;
}
nav .menu ul.sub-menu li:first-child:before {
  border: none;
}

– Kyle

[rsae]

Nearly there. The search box is inline, but I think it’s covering up the search icon now…
Perhaps this is why the search box was designed to drop below the menu?

[Kyle – SUPPORT]

Hi

Yes it is covering it, but if you are having it always showing, then there is no need for the search icon as it will not do anything.

You can try this if you want to show the icon (remove all the css I have given you previously:

nav .menu-search ul.sub-menu {
  opacity: 1;
}
.menu-search .sub-menu {
  top: 0 !important;
  background-color:transparent !important;
}
.menu-search ul li form input {
  margin: 4px;
}
nav .menu ul.sub-menu li:first-child:before {
  border: none;
}

– Kyle

[rsae]

Fantastic! Thank you. The search icon anchors the search box so I really want to keep it. Is there any way to make it functional — to make the search icon act as a “submit” button for the search query?

[rsae]

Also, just one last thing: the drop-down menu that shows the search results as you type is now transparent so it’s difficult to read. Did I miss something in the CSS that made this transparent? Thank you.

[Kyle – SUPPORT]

Sorry, you need to add this:

.ajax-search-results {
  background: #fff;
}

– Kyle

[rsae]

Thank you!

Just missing the other half of my question:

Is there any way to make the search icon functional as a “submit” button?

[Kyle – SUPPORT]

No problem!

Unfortunately not, sorry.

– Kyle