A New Navigation Search

GeneratePress 3.3.0 (currently in alpha testing) has a new and improved Navigation Search feature.

While our old Navigation Search feature has served us well over the years, it was time for a new design with more modern accessibility features.

To use the new Navigation Search, you first need to deactivate the old one in the Customizer (Customize > Layout > Primary Navigation). This will reveal the new “Enable navigation search modal” option.

Our new Navigation Search adds the same icon to your navigation, but it opens as a fully-accessible modal, instead of opening on top of your menu items.

The new Navigation Search Modal

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

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.

We hope you enjoy the new feature! Let us know what you think in the comments 🙂

21 thoughts on “A New Navigation Search”

  1. Hi! I don’t understand the accesibility part. Can you explain deeper? Or is there any help doc that explains it? Thanks

    Reply
    • Hi there,

      The new search modal can be navigated using only your keyboard – no mouse needed. It also has all of the necessary labels for screen readers 🙂

      Reply
  2. Hi, I don’t understand how to activate the new search field. I am using GP Premium. Can you give me some more guidance? Thank you

    Reply
    • It can be activated in Customize > Layout > Primary Navigation.

      If you have the current Navigation Search option enabled, you need to disable it first so the new option appears.

      Reply
  3. Ehi Tom, I recently tested this new functionality and it’s great!
    I was wondering if there’s a way to add a close button to the modal. Is there any particular class we can use to call a JS function?

    Reply
  4. Thanks but I really don’t get it.
    I enabled this option on a site that didn’t previously have the search icon (it was disabled in customizer). I now updated the site and enabled this option in both the free and premium versions but nothing shows up…
    Am I missing a step?

    Reply
    • This new feature requires:

      1. The use of “flexbox” – you have to switch to “flexbox” from “floats” using the “Structure” option in “Customize > General”. If you don’t see this option it means you’re already using flexbox.
      2. The use of svg icons – you have to switch to “svg” from “font” using the “Icons” option in “Customize > General”.

      We’ll be updating the theme to only show the new feature under these conditions next week.

      Reply
      • Hi Tom,

        Is there an update coming? I’ve been holding off on upgrading GP and GP Premium with these latest changes until it comes out. Thanks!

        Reply
  5. Tom, do you have any way to get this working with WPML? The search popup is translated but the results are always sent to the primary language. Is there a way to add url parameters (e.g. lang=fr) to the search results when the search is clicked to allow for multilingual sites that use URL parameters?

    Thanks!

    Reply
  6. The truth is Every client of mine wants to enable dark mode on their sites. Also they want to keep their site lite weight so I have to use gneretapress theme. But the sad thing is that there is no option to enable dark mode in such a great theme. Please give option to enable dark mode in this theme…

    Thank you

    Reply
  7. Why does the Search button not appear in the main navigation when I activate the “Enable navigation search modal” feature? Is it possible to include URL parameters (such as lang=fr) in the search results?

    Reply
  8. Actually, this is looking pretty cool, but it maybe it can more beautiful if you make this with full screen background color. something like Blocksy theme (only suggestion).

    Reply
  9. Hola Tom,

    Esta nueva funcionalidad no me sirvió, desapareció el icono de buscar y ahora no puedo volver a como estaba antes, probé eso de flexbox pero tampoco me funciono, tengo todo actualizado a las ultimas versiones.

    Saludos

    Reply
  10. I love the new navigation search modal. I have both the premium version of GeneratePress and GenerateBlocks. Also, the support is top-notch – No regret.

    Reply

Leave a Comment