Adding a Search Modal to Primary Menu

  • I’ve read through the documentation at https://docs.generatepress.com/article/navigation-search-modal/ and through past support topics, and I still don’t understand how to add a search modal when using a navigation element.

    1. I checked the check box in Customizer > Layout > Primary Navigation.
    2. I made a block element and chose type Search Modal. It is applied to the whole site.
    3. The documentation says to add ‘ data-gpmodal-trigger=”gp-search” ‘ as a custom attribute, but I don’t see where to add a custom attribute.
    4. No modal shows up.

    All I want is a magnifying glass at the right of my menu that triggers a search box to pop up. I was easily able to do this in GP 1 using the built-in Primary Navigation.

    Also, it looks like I’m supposed to add a magnifying glass icon manually. But I don’t see any such icon among the built-in icons. Is everyone getting one with SVG?

    I understand that I can set the settings for the modal in the Customizer, so I think once I have it appearing at all I’ll be able to make it look right.

  • Hi there,

    You don’t need to create an Element for this. Here are the steps on how to do it:
    https://generate.support/topic/add-search-to-new-navigation-block/#post-168140

    For the search icon, you can use this custom SVG:

    
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256" fill="currentColor"><path d="M232.49 215.51 185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68 68.07 68.07 0 0 1-68-68Z"></path></svg>
    
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.