How to create search for Sparkling theme like one on Colorlib main website?

Sparkling
1

I would like to have a search button inside header like you have on Colorlib main website. I mean that tiny icon on which you click and menu gets replaced with search bar.

2

It is somewhere complex search form and requires some work to be implemented. Here are steps you should take.

  1. First you have to open file called header.php file that you can find inside Sparkling theme root folder.
  2. On that file you have to find these lines of code:
<?php sparkling_header_menu(); ?>
</div>
  1. After those lines of code copy/paste this code snippet and save changes.
<div id="searchform-header-replace" class="clr header-searchform-wrap">
	<div class="container">
	<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search" class="header-searchform">
		<input type="search" name="s" autocomplete="off" placeholder="Search..." />
			<input type="hidden" name="lang" value="Search"/>
	</form>
	<span id="searchform-header-replace-close" class="fa fa-times"></span>
	</div>
</div><!-- #searchform-header-replace -->

  1. Now open up file called functions.min.js that you can find inside Sparkling theme folder >> inc >> js.

  2. At the end of that file copy/paste the following code snippet:

jQuery(document).ready(function() {
  jQuery(".search-header-replace-toggle").click(function() {
    jQuery('#searchform-header-replace').addClass("show");
  });

  jQuery("#searchform-header-replace-close").click(function() {
    jQuery('#searchform-header-replace').removeClass("show");
  });
});
  1. No go to your WordPress Dashboard >> Appearance >> Menus and create a new menu or updating existing one by adding menu item which is formatted exactly like this:

Search menu item for Sparkling theme
Search menu item for Sparkling theme878×634 50.2 KB

Navigation label can be used in your own language but by using this technique there will always be some text next to icon.

  1. CSS Classes section can be enabled via Screen Options that you can see on the upper right corner of Menu. Editor Screen. On that field for this particular menu item you should add the following text:

site-search-toggle search-header-replace-toggle

  1. The last thing you should do is to apply styling and to look this search for similar to one that we have on Colorlib website you can use the following CSS code via Appearance >> Theme Options >> Other >> Custom CSS:
#searchform-header-replace { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #fff; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; }
#searchform-header-replace form { height: 100%; width: 90%; float: left; }
#searchform-header-replace input { height: 72px; width: 100%; outline: 0; border: 0; -webkit-appearance: none; border-radius: 0; -moz-border-radius: none; -webkit-border-radius: none; font-size: 32px; color: #bbb; background: none; }
#searchform-header-replace-close { float: right; right: 0; margin-top: 20px; height: 30px; line-height: 30px; font-size: 26px; color: #bbb; cursor: pointer; }
#searchform-header-replace-close:hover { color: #000 }
body.boxed-main-layout #searchform-header-replace input { padding: 0 30px }
body.boxed-main-layout #searchform-header-replace-close { right: 30px }

#searchform-header-replace.show { visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
3

Hey Aigars

I implemented the above code. It’s working perfect. But have a small issue

And when I hover my mouse to the search button, title attribute is showing there as glyphicon-search.

Please check my blog gennibbles.com

Please tell me how to fix this

4

Hi Guys,

thank you very much for this exquisite theme.

Hovering over main menu with glymphicon item displays a title, which is, you know, glyphicon-something :slight_smile:

I´d like to ask if there is a way to avoid this behavior and display menu item name when hovering over.

Thank you for your time :slight_smile:

5

Love the theme!

I have the same issue, how do I disable the words on hover of the menu (doesn’t seem to do it on this page).

I would also like to have only the search image (no text), similar to this page.

6

Hi There,

This is old there and to help keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/sparkling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Thanks,
Movin

7

Hello peeps,

I have done everything step by step but it really doesnt seem to work. The search field doesnt come up and the menu item (search) is acting as a typical Search link.

Any thoughts?

The site is this http://207.154.222.124

Thanks in advance!

8

@prodromos Please try using following plugin to achieve this.

If you have more questions then please create separate topic for it.