Navigation Search Modal

Starting in GeneratePress 3.3.0, the Navigation search feature has been replaced with the Navigation Search Modal feature.

The feature can be activated in Customizer > Layout > Primary Navigation.

The color options can be found in Customizer > Colors > Search Modal.

Switching from Navigation Search

If your current site has the Navigation search feature enabled, make sure to disable it first, then the Navigation Search Modal checkbox will appear.

Use Navigation Search Modal in Secondary Navigation

By default the navigation search modal is located in the primary navigation, the snippet below allows you to move it to the secondary navigation on the desktop.

Please note that the navigation search modal option should be activated under Layout > Primary Navigation in order for the snippet to work:

add_action( 'wp', function() {
    if ( generate_get_option( 'nav_search_modal' ) && ! wp_is_mobile() ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger');
        add_action( 'generate_inside_secondary_navigation', 'generate_do_search_modal_trigger' );
    }
}, 20 );

Add Custom Navigation Search Modal Trigger

The GP search modal is completely accessible and can be triggered easily with a data attribute: data-gpmodal-trigger="gp-search".

Create Custom Navigation Search Modal

You can also replace the search functionality inside the modal directly in GP Premium 2.3.0 using the new “Search Modal” Block Element. Simply create the new Element, add your own Search block (or custom HTML), and you’re good to go! You can even use a block plugin like GenerateBlocks to define the width and design of the modal.