[Resolved] Ajax Search Pro Menu Focus Conflict

Home Forums Support Ajax Search Pro Menu Focus Conflict

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1164239
    Chas

    I’m using the Ajax Search Pro plugin to add a website search form to the menu of my GeneratePress themed site, but the search form appears to have a conflict with GeneratePress that doesn’t allow the form to get focus when the user clicks on it. The developer of the plugin determined that the cause is a conflict with a script that’s most likely generated by the theme, although he couldn’t pinpoint which script specifically. He said the developers of the theme would be able to spot it quickly. Can you help me diagnose where this conflict is coming from, and how I might resolve it?

    To see the problem in action, I’ve given admins the URL of the site in a development environment. Notice that the same search form appears twice on the home page: once in the menu and once in the middle of the page. The one in the middle of the page works fine. The one in the menu doesn’t gain focus when the user clicks, so can’t work. (This is the core problem.)

    Any help would be appreciated. Thanks.

    #1164657
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not seeing anything obvious.

    Is it possible to hook the search into the navigation without adding it as a menu item? If there’s a function we can reference to output the search, I can help with the hook itself.

    #1165512
    Chas

    Yes, it is possible to hook the search form into the nav. Here’s a doc on the exact code snippet that does it: https://documentation.ajaxsearchpro.com/getting-started/placing-the-search-shortcode-in-theme-files

    Looks pretty simple.

    Which PHP file (and roughly where in the file) would I put the snippet to get the search bar to appear just to the right of the website title and the left of the menu? (I use the menu as header option.) Thanks for any info.

    #1165757
    Tom
    Lead Developer
    Lead Developer

    You could try this:

    add_action( 'generate_inside_navigation', function() {
        echo '<div class="ajax-nav-search">';
            echo do_shortcode( '[wpdreams_ajaxsearchpro id=1]' );
        echo '</div>';
    } );

    Then you might need some CSS to tweak the positioning.

    Let me know if it fixes the issue or not 🙂

    #1168331
    Chas

    Sorry, I’m not a php guy. Which php file should this go in?

    #1168592
    David
    Staff
    Customer Support
    #1169521
    Chas

    Got it added, but it’s now located as the first thing on the page–before the “Site Identity” rather than in between Site Identity and primary navigation menu. How can I control the placement of the search bar?

    #1169727
    Chas

    Specifically, if I could place the search bar to the right of the site identity, rather than to the left of it, that would be perfect. Is there some other action I need to add to other than generate_inside_navigation that would place the search bar AFTER the site icon & name rather than BEFORE it? Thanks.

    #1169850
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

    .ajax-nav-search {
        order: 1;
        margin-right: auto;
    }
    
    .navigation-branding {
        margin-right: 0;
    }
    
    #ajaxsearchpro1_1 {
        margin-top: 0;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1169862
    Chas

    Worked perfectly, thanks!

    #1169864
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.