-
Posts
-
Hi Team,
we’re looking into purchasing another Enfold theme license for another website we’re creating. We’re looking to make something that has a large search bar to easily find products on the website.
As we really love enfold and it’s already very versatile to make whatever we’d like with it, the only obstacle we’ve encountered is to move the search bar somewhere just below the header, and to expand it to be long similar to search websites like, google, yahoo, amazon etc.
Do you have a code I can insert to move the search bar below the logo instead of being part of the main menu and extend the search to be longer something like this: http://demo.globalads24.com/wp-content/uploads/2013/05/Screen-shot-2013-05-31-at-7.34.05-PM-option-1.jpg or similar.
Thanks
-Nicolas
I just thought if maybe something like this would be easier http://demo.globalads24.com/wp-content/uploads/2013/05/Screen-shot-2013-05-31-at-10.45.10-PM-1.jpg since it would be on the same line where the current search bar is. This would also work for us if at all possible.
Thanks,
jasmine
Hi,
This will get you started, just add this on your custom.css or Quick CSS.
.avia-search-tooltip.avia-tt {
display: block !important;
opacity: 1 !important;
top: 0 !important;
box-shadow: none;
border: none;
width: 700px;
left: -500px !important;
}
#top #searchsubmit, .ajax_load {
right: -300px;
}
#top #s {
width: 600px;
padding: 11px 47px 11px 5px;
z-index: 1;
margin: 0;
box-shadow: none;
max-width: 700px;
}Regards,
Ismael
Hi Ismael,
We added this “as is” to quick css and nothing has changed. Do we need to do anything else? Here is a live demo site http://omglovetwins.com
If you think there is a problem at the backend and you can possibly help we can give you a username and password.
Thanks,
Nicolas
Ismael I do apologize,
We did not check every possibility before I posted a comment, we just noticed there were no changes on the first glance and now we tried again and clicked on the little search logo and it expanded. Now question is there a possibility to make that search bar permanently open in stead of the main menu, meaning it would be always open so people can search right away. Here is a screenshot so if it can be like the one on the right http://demo.globalads24.com/wp-content/uploads/2013/06/Screen-shot-2013-06-02-at-7.28.48-PM-1.jpg
Thanks,
Nicolas
Hi Nicolas,
I think your best option to get that kind of layout would be to modify the header.php file and insert a get_search_form inside a new div. Either way it will require a good bit of css customization to keep everything responsive and the layout intact.
See: http://codex.wordpress.org/Function_Reference/get_search_form
Regards,
Devin
Thanks Devin for the link, we’ll try to look into it deeply. We found a custom search bar from Google http://www.google.com/cse/ and were wondering if it’s compatible with Enfold or if you’re at all familiar with it.
Thanks
-Nicolas
Hi,
My bad. I thought I fixed it. I’ll tag Kriesi. I can’t make the tooltip appear on page load.
Regards,
Ismael
Thanks everyone for all your support. We’ve dealt with lots of shop WP themes before and we’ve had such a good experience with Enfold that this will be our 4th license. Really glad you added WooCommerce functionality.
Thanks again
-Nicolas
I was trying to figure out the search form from wp but not sure how to do it so I was playing a little with Blank Pages putting the search bar in the middle here is a link http://www.omglovetwins.com/test-3 so something like this would be great if we can add to the middle of the header, but as Devin said its not responsive and I don’t know how to make it responsive so if you know an easier way that doesn’t take too much of your time let us know.
PS. We can also insert search bar in advanced layout page but there is lots of space around and in between header and search and also as in above we would have to add it to every page plus its also not responsive here is a link http://www.omglovetwins.com/search-bar
Thanks,
jasmine
Hi,
I see you did use the code I gave you. You can make it responsive using this
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (min-width: 768px) and (max-width: 989px) {
#top #s {
width: 400px;
}
#top #searchsubmit, .ajax_load {
right: -100px;
}
}
@media only screen and (min-width: 320px) and (max-width: 500px) {
#top #s {
width: 250px;
}
#top #searchsubmit, .ajax_load {
right: 10px;
}
}Regards,
Ismael
Brilliant Ismael,
Thanks so much its perfectly responsive. There is one issue with the product search bar the orange square on the right separates completely to the right so it cuts the text in the 3rd column. Its suppose to be the same as the one above which is a regular search bar.
Here is the screenshot http://demo.globalads24.com/wp-content/uploads/2013/06/Screen-shot-2013-06-12-at-8.45.42-PM.png
And here is a live site: http://www.omglovetwins.com/test-3
Is there something I can do to be at the right place like the above one.
Thanks,
jasmine
Hi,
Glad it work. Try this:
.widget_product_search #searchform #searchsubmit {
right: -40px;
}
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (min-width: 768px) and (max-width: 989px) {
.widget_product_search #searchform #searchsubmit {
right: -80px;
}
}
@media only screen and (min-width: 320px) and (max-width: 500px) {
.widget_product_search #searchform #searchsubmit {
right: 10px;
}
}Regards,
Ismael
Perfect!
Thanks so much Ismael for all your help and time spent on this.
Have a Beautiful Day and Best Regards,
jasmine
- The topic ‘Can we move or expand the Search Bar?’ is closed to new replies.