Search icon on skin header

[LPalm_1979]

Hi everyone

I have spent the afternoon going through the forum and searching the internet but cannot find what I am looking. I am hoping someone here can help me!

I am generating side nav help files and have been reviewing the search function. Is it possible to add the search bar as an icon in the header that when selected, the search bar becomes visible?

Icon.PNG

If it is possible, how do I do this?

Any advice is gratefully appreciated!!

L

[AlexFox]

Yes this is possible, you will have to assign an ID to your icon and use some jQuery.

The following code should be put in (or called from) any template page that should have the "hidden" search bar:

Code: Select all

$(document).ready(function() {
	$('#SEARCH_BAR').appendTo('#SEARCH_POPUP');
    	$('#SEARCH_ICON').click(function() {
        	$('#SEARCH_POPUP').toggle();
    });
});

You need to replace #SEARCH_ICON with the ID of the clickable icon that will show/hide the search bar, #SEARCH_BAR with the ID of the element that contains your search bar and #SEARCH_POPUP with the ID of the element that will contain the search bar (see below).

Add the following HTML to the same template pages you add the jQuery code to:

Code: Select all

<div id="SEARCH_POPUP"></div>

Replace SEARCH_POPUP with a name you'd prefer and make sure the change is reflected in the jQuery (ensure you leave the # in the jQuery script).

Add the following CSS to your project and target the SEARCH_POPUP with it:

Code: Select all

		#SEARCH_POPUP 
			{
				display: none;
				position: fixed;
				width: 80%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

Now if all is done correctly, when the page loads the search bar will be moved into the hidden POPUP element and will be displayed only when the user clicks the search icon and hidden if they click it again.

Good luck!