Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #24141

    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/ (Purchase code hidden if logged out) -at-7.34.05-PM-option-1.jpg or similar.

    Thanks

    -Nicolas

    #122496

    I just thought if maybe something like this would be easier http://demo.globalads24.com/wp-content/uploads/2013/05/ (Purchase code hidden if logged out) -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

    #122497

    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

    #122498

    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

    #122499

    ~

    #122500

    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/ (Purchase code hidden if logged out) -at-7.28.48-PM-1.jpg

    Thanks,

    Nicolas

    #122501

    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

    #122502

    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

    #122503

    Hi,

    My bad. I thought I fixed it. I’ll tag Kriesi. I can’t make the tooltip appear on page load.

    Regards,

    Ismael

    #122504

    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

    #122505

    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

    #122506

    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

    #122507

    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/ (Purchase code hidden if logged out) -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

    #122508

    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

    #122509

    Perfect!

    Thanks so much Ismael for all your help and time spent on this.

    Have a Beautiful Day and Best Regards,

    jasmine

    #122510

    Thank you Ismal,

    Really appreciate all your extra support.

    Regards,

    -Nicolas

    #122511

    Hey,

    Glad we could help. :)

    Have a nice day.

    Cheers,

    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Can we move or expand the Search Bar?’ is closed to new replies.