Parallax Pro-add toggle search to the Primary navigation bar

[peterlaz]

I want to add toggle search to the Primary navigation bar in Parallax Theme. I followed the instructions as outlined in http://genesisdeveloper.me/adding-toggle-search-form-using-parallax-pro-theme/

I then added the custom menu to the Header Right Widget.

The search icon is showing up , but it is not working as it should be.

I wonder if there are additional steps needed to get the toggle search working.

Appreciate help.

Thanks

http://www.plan2040.com/

[Brad Dalton]

You have a js error. Did you add the jQuery and load it using PHP code?

---

Tutorials for StudioPress Themes.

[peterlaz]

I created a new file in Dreamweaver CS6 with the following codes

$(".toggle-search a").click(function() {

$(".search-wrap").slideToggle('slow', function(){
$(".toggle-search").toggleClass('active');
});

});

and saved the file as toggle-seach.js

Is that a problem? I will appreciate some guidance on creating Javascript files correctly.

Thanks

[Brad Dalton]

You need to load the file as well using PHP code.

---

Tutorials for StudioPress Themes.

[peterlaz]

Appreciate some guidance on how do that.
Thanks

[Brad Dalton]

The code is in the tutorial

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'wpsites_load_scripts' );
function wpsites_load_scripts() {

	wp_enqueue_script( 'toggle-search', get_bloginfo( 'stylesheet_directory' ) . '/js/toggle-seach.js', array( 'jquery' ), '1.0.0' );
	
}

Add the above code to yoiur functions file.

---

Tutorials for StudioPress Themes.

[peterlaz]

Thanks for the prompt reply and guidance.

I carried out all the steps outlined in the tutorial and have added the codes as

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'parallax_enqueue_scripts_styles' );
function parallax_enqueue_scripts_styles() {

wp_enqueue_script( 'parallax-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_style( 'dashicons' );
wp_enqueue_style( 'parallax-google-fonts', '//fonts.googleapis.com/css?family=Montserrat|Sorts+Mill+Goudy', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'toggle-search', get_bloginfo( 'stylesheet_directory' ) . '/js/toggle-seach.js', array( 'jquery' ), '1.0.0' );
}

However, I am not getting the desired results.

[Brad Dalton]

Check the path to the js file matches the location of the file. Should be in the js folder.

http://www.plan2040.com/wp-content/themes/parallax-pro/js/toggle-search.js

---

Tutorials for StudioPress Themes.

[peterlaz]

Thanks for prompt reply. Much appreciated.

Yes, there was an error in the spelling of the file name. I have corrected it and the toggle-search.js file is now correctly located in the theme's JS folder. However, the result is still not showing up.

Thanks.

[peterlaz]

Followed every code as outlined in http://genesisdeveloper.me/adding-toggle-search-form-using-parallax-pro-theme/
There was suggestion by a reader Brian in the tutorial to use the following code for Javascript. I tried that without any success.

jQuery(document).ready(function($js) {
$js(".toggle-search a").click(function() {
$js(".search-wrap").slideToggle('slow', function(){
$js(".toggle-search").toggleClass('active');
});
});
});

[mmjaeger]

Try to wrap you function like this:

(function($) {
$(".toggle-search a").click(function() {
	
     $(".search-wrap").slideToggle('slow', function(){
	$(".toggle-search").toggleClass('active');
   });
   
});
})(jQuery);

[peterlaz]

Thanks for the guidance.

I tried the code as suggested. But the search form is still not showing up.
http://www.plan2040.com/wp-content/themes/parallax-pro/js/toggle-search.js

Thanks.

[mmjaeger]

This reply has been marked as private.

[peterlaz]

I am not seeing any reply. How do I view reply marked as private?

[mmjaeger]

well, the javascript error is gone – that’s good – what I couldn’t find on your page however is the search form – why don’t you try to add the search form to the header widget area and we will see what happens.

[peterlaz]

Adding a search form to the header widget area is not a problem. If I add one, sure it appears. But that is not the way toggle search function is suppose work. I followed the tutorial to the letter as outlined in
http://genesisdeveloper.me/adding-toggle-search-form-using-parallax-pro-theme/

I just can't understand why when I click on the dashicon the search form does not pop up?

Thanks

[peterlaz]

Is there another way to do the whole thing?

[Brad Dalton]

I have written a tutorial about how to do this however its for members only. For those who don't mind paying for access, here it is http://wpsites.net/web-design/drop-down-nav-menu-search-form/

Includes installation support and gauranteed to work.

---

Tutorials for StudioPress Themes.

[Author]

Posts