-
ulicgn
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?
-
ulicgn
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/lQXApmnIt 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.
- You must be logged in to reply to this topic.