Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to add a HTML menu item to secondary menu with specific/custom hook element

  • Hi,
    I tried adding a looking glass svg icon to my SECONDARY menu triggering the search modal.
    The modal is enabled in the customizer, and I verified the data-gpmodal-trigger attribute works when added to arbitrary html elements. Using the Code example from https://docs.generatepress.com/article/navigation-search-modal/ it did
    not work to place the icon on the secondary menu.

    With the default menu editor, the WP “custom link” allows no custom data attributes and using raw svg as a label looks quite ugly in the menu backend.

    So for a clean implementation that can be later customized in the GUI, I created a GP Hook element :

    <a class="gp-menu-item ncb-menu-search-icon" 
       data-gpmodal-trigger="gp-search" 
       aria-label="Suche" 
       role="button" 
       style="cursor:pointer" 
       tabindex="0">
      <span class="gb-shape">
        <svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" d="M505 442.7L405.3 343c28.4-34.9 45.7-79.4 45.7-128C451 96.5 354.5 0 233 0S15 96.5 15 215s96.5 215 215 215c48.6 0 93.1-17.3 128-45.7l99.7 99.7c4.5 4.5 10.6 7 17 7s12.5-2.5 17-7c9.4-9.4 9.4-24.6 0-34zM233 367c-83.9 0-152-68.1-152-152S149.1 63 233 63s152 68.1 152 152-68.1 152-152 152z"/>
        </svg>
      </span>
    </a>
    

    The element has a display rule “Entire Site” – it shows up fine if using content hooks like generate_after_content etc.

    But I could not get it to show up when assigning navigation hooks. I tried a couple of them, like generate_menu_bar_items or generate_inside_secondary_navigation. The strange thing is: the hook is displayed in the list of active elements in the admin menu bar (see screenshot, upper part).

    https://pasteboard.co/2a7xOfROZy7w.png

    So the element is shown to be present, but nevertheless there is no rendered html of the element in the page.
    Note that the menu is inside a site header block element ( screenshot lower half).

    Bottom line – is there a way to get a custom HTML menu item into the secondary nav with GP hooks and elements, or do I have to use custom code in functions.php or a php code element? Here in this forum, mostly code using generate_menubar_items is recommended, but like I said this has no output in my case.

    Thanks, best Regards
    Ulrich

  • Hi there,

    I’m not sure I fully understand your setup.

    Can you link me to your site and let me know which navigation is referred to as the secondary menu?

  • Hi Ying,

    I was out of office, hence the delay. Thanks for checking. The site is on a nonpublic network currently.
    I added another image to illustrate the setup, hopefully this better illustrates it.
    https://imgur.com/a/lQXApmn

    It is like this:
    – Modal is enabled, data-gpmodal-trigger works if used on arbitrary custom html elements.
    – created a GP Hook element with HTML containing a looking glass SVG button with data-gpmodal-trigger
    – tried to place this hook element with one of the “Navigation” hooks. Result: Element HTML is not rendered anywhere in the page.

    As you see, there is a WP menu called “ServiceMenu” that is correctly set up as secondary menu.
    We have GP SiteHeader Block where a Navigation element is contained with this “Service Menu”.
    Now I would expect that the Element that has the hook generate_inside_secondary_navigation assigned would show up.

    I really would like to have the code for this element editable in the GUI , so it should be a GP element which I would like to append to the secondary menu (in this case, named ServiceMenu)

    If generate_inside_secondary_navigation is not the right hook, which one is?
    Regards
    Ulrich

  • Hi Ulrich,

    Since you are using the GB Pro site header block, you can add a GB button block with the search icon SVG to your navigation block or site header block, and set the HTML attribute data-gpmodal-trigger="gp-search" for the button block > advanced panel.

    You do not need to use HTML code in this case.

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