Search Modal Forces a New Line

  • aaronmckeon
    April 8, 2026 at 12:28 pm

    I had to add several items to my site’s primary navigation. Originally, all items fit on one row and the search modal (just a magnifying glass) was the last item on the right of the row.

    However, when adding additional items, it adds a second row of menu items (which I expected) but then it puts the search modal magnifying glass on a third row all by itself even though there is plenty of space for it in the second row.

    Is there a way to force it onto the second row? I’ve tried some CSS but haven’t been able to get it to work, and I’m not the best with custom CSS! Any help would be appreciated. Below please find a screenshot:

    https://i.postimg.cc/wvd5vqpJ/Screenshot-2026-04-08-162441.png

    I’ve put a link to the site in the private information.

  • George
    April 8, 2026 at 1:05 pm

    Hello,

    Try this. Disable the search modal from the Customizer (Customizer -> Layout -> Primary Navigation).

    Disable search modal

    Then, programmatically, insert the search icon as the last menu item using this PHP snippet:

    add_filter( 'wp_nav_menu_items', 'add_search_to_nav_menu', 10, 2 );
function add_search_to_nav_menu( $items, $args ) {
    if ( $args->theme_location === 'primary' ) {
        $items .= '<li class="menu-item menu-search-item"><a href="#" role="button" aria-label="Open search" aria-haspopup="dialog" aria-controls="gp-search" data-gpmodal-trigger="gp-search"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg></span></a></li>';
    }
    return $items;
}

    This way the search icon is a real <li> and wraps with the menu naturally at any screen size. The data-gpmodal-trigger attribute should still work fine since it’s the same markup GP uses.

  • aaronmckeon
    April 8, 2026 at 3:25 pm

    Awesome! That worked. Thank you so much.

    — Aaron

  • George
    April 9, 2026 at 11:36 am

    You are welcome!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.