In this article I show how animated Search form in Genesis tutorial can be implemented in Dynamik.
Step 1
Create a file named say, global.js having the following code and upload it to wp-content/uploads/dynamik-gen/theme directory.
Genesis and WordPress Tutorials
Great tutorial Sridhar! Thanks!
The only issue I’m running into is when it hits mobile breakpoints.
In the tablet viewport range the search form appears off to the right of the viewing area.
In the mobile viewport range, the search form doesn’t expand horizontally – only half of the search button appears.
Also, would be awesome if there were a way for it to appear automatically ‘outside’ of the primary nav and ‘open’ on mobile devices.
Thanks again,
Craig
I shall look into this tomorrow.
I have updated the CSS to fix this. Change the last media query width from 480px to wherever you want the search icon to appear in a new line from.
Thanks Sridhar – this is working great!
Only one small hitch – and I’m stumped on this one. At the first mobile breakpoint the search form goes off screen to the right.
Screenshot here: https://www.dropbox.com/s/qmyiyfvmrkgu0o1/Screenshot%202015-07-10%2010.20.51.png?dl=0
Any suggestions?
Thanks again,
Craig
Can you provide the URL?
Sure… http://gentlemonk.com
Thanks!
At 839px, I see
left: 0for.search-div. Did you add this?I must have left that in the responsive section from previous efforts.
I just removed and it’s working properly now.
Thanks!
FYI – I also increased the z-index to 100 because the search form was falling behind a sidebar widget.
Thanks again!
Hi Sridhar,
Noticed something with the search bar on mobile. When im in landscape on my phone it shows at the end of the menu just like on the desktop site but in portrait shows up inside the mobile slide down menu at the end. How do I get the search icon next to the hamburger icon and drop down just like in landscape mode?
Thanks
Hey there,
I have tried it, but just the search icon appears… not working.
Do you have any idea, what the reason could be?
staging.101nomads.com
Cheers, David.
I see the search box appear when the icon is clicked fine.
http://d.pr/i/1kgWc
Hey Sridhar,
I have another question.
Actually I’d like to have the menu and the search function in the header (right and logo left)
How do I change the code?
Cheers, David
Hi Sridhar, this works great thanks.
Is there any way to append this animated search to a header menu?
thanks,
Paul
Hi Sridhar,
I am trying to get this to work and getting some strange results. I copied the sample code verbatim .
you can see it here camdenccc.com
Is there an updated version? What am I missing?
Thanks!
-eric
https://camdenccc.com/wp-content/uploads/dynamik-gen/theme/global.js shows a 404 page not found.
Can you check if you have uploaded
global.jsfile to wp-content/uploads/dynamik-gen/theme?I had it turned off while debugging! Thank you, once I renamed it everything worked fine.
Thanks again!
Actually I think I have an issue with the way the custom function uses the child theme jQuery
CHILD_THEME_VERSION, true –Works in IE and Firefox
CHILD_THEME_VERSION, false — Works in Chrome and IE
Is there another method I can use to define jQuery?
Here is the error from Firefox:
ReferenceError: jQuery is not defined[Learn More] global.js:1:1
https://camdenccc.com/wp-content/uploads/dynamik-gen/theme/global.js:1:1
You can simply replace
CHILD_THEME_VERSIONwith1.0.0.I tried that and still get the same result. In Chrome the search does not show when I click the button, I also noticed that .search-div {
display: none;…} is active where in Firefox it is commented out correctly.
I have tried inserting https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js right under the title thinking that it may not be loading jQuery
Is there anything I missing?
I checked the generated HTML source code of your site and see that jQuery is being loaded fine. You should/need not load jQuery manually.
In Chrome’s console, I see http://d.pr/i/Rp90BR. Do you have any idea where it’s coming from?