How to create full-width search box in homepage?

  • Resolved antheac

    (@antheac)


    3 years, 10 months ago

    I use the Divi Theme and currently have the divi search bar in the homepage for now, but I want to replace it with the AJAX search bar.

    I was able to add the AJAX search function to the menu, which is all well and good, but I have no idea where to start if I want to add it to a full-width section in the homepage.

    Would appreciate any advice. Thanks.

    • This topic was modified 3 years, 10 months ago by antheac.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Marta

    (@martadella)

    Hi antheac,

    Currently, the Fibo search box on your website is set to max 400px. You can change it with the following CSS code:

    .et_header_style_left .et_search_form_container .dgwt-wcas-search-wrapp {
  max-width: 100%;
}

    Let me know if this is what you expected ??

    Regards,
    Marta

    Thread Starter antheac

    (@antheac)

    @martadella Hi Marta, thanks a ton for your response, but I don’t think that’s quite what I’m looking for.

    I’m happy with the Fibo search box in the menu bar, and don’t wish to make any changes to it.

    What I’m wondering is if there is a way to add the Fibo search box as a module to a page section (replacing the Divi search module that I currently have on the front page, which fails to search our WooCommerce products).

    The 4th image down from the showcase images on the FiboSearch website. is exactly what I’m looking to achieve.

    Sorry if this question has been asked before. Any advice would be much appreciated.

    Plugin Support Marta

    (@martadella)

    Hi @antheac,

    Sure, you can add FiboSearch with a shortcode, eg.
    [fibosearch layout="classic" class="fibosearch-wide "]

    and then style it by changing the min-width property:

    .dgwt-wcas-search-wrapp.fibosearch-wide {
  min-width: 1000px;
}

    If you aren’t familiar with custom CSS, take a look at this video: https://www.youtube.com/watch?v=f0_6aeZEV58.

    I hope this is helpful for you!

    Regards,
    Marta

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to create full-width search box in homepage?’ is closed to new replies.