1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Search Function Customization

Discussion in 'Free Divi Community Forum' started by Arielvanice7, Oct 23, 2024.

  1. Arielvanice7

    Arielvanice7 New Member

    Hi, so on my site I checked the checkbox in the theme customizer to enable the search icon. This allows you to search the site. The problem is when you click the icon it opens the search bar all the way on the left side of the screen blending in with the logo. Does anyone know how to customize this so it just opens underneath the search icon?
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  2. Divi Booster

    Divi Booster Divi Expert

    Hi Arielvanice7,

    Normally, the search bar will only extend the length of the menu links, rather than going all the way over to the logo, so perhaps something in your header setup is causing it to extend over to the left side... are you able to share a link so that we can take a look?

    Thanks!
     
  3. Arielvanice7

    Arielvanice7 New Member

    Yes the url is runsafesecurity.com
     
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  4. Divi Booster

    Divi Booster Divi Expert

    Thanks!

    I think you should be able to improve the look of the search bar with by adding this CSS to your site:

    Code:
    Log In or Sign Up to view this code.
    It makes the search box half its original width and makes sure it is positioned on the right. This prevents it from overlapping the logo. I've also added a white background so that the links underneath don't show through.

    I hope that helps!