1. 8th Anniversary Sale Get 88% OFF Lifetime Pro Membership & access all 16+ premium Divi extensions: Divi Block, 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.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.
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 Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile: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 Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  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!