- This topic has 19 replies, 3 voices, and was last updated 3 years, 10 months ago by David.
-
AuthorPosts
-
May 3, 2020 at 1:40 am #1267076Thomas
Hi David,
got a new question π
Would it be possible, to replace the gp search in the header with my custom search from the wooevents plugin?
Cheers,
ThomasMay 3, 2020 at 6:23 am #1267328DavidStaffCustomer SupportHi there,
if you mean the GP Navigation Search then unfortunately no its not currently possible to replace it.
Let me know if thats what you mean
May 5, 2020 at 3:09 am #1270159ThomasYes, that’s what I mean.
Do you have a spontaneous idea, how to solve my “issue” with another plugin or something else to make it look more elegant?
May 5, 2020 at 3:34 am #1270192DavidStaffCustomer SupportI assume Woo events provides a shortcode ( or PHP function ) for the search field ?
If so you can add it inside the Navigation using theinside_navigation
hook using the GP Hook Element:https://docs.generatepress.com/article/hooks-element-overview/
Then if we can see the site i can provide some CSS to position and style it. Note: it WILL NOT use the GP Search Icon to open and close the search field, it will always be visible.
May 5, 2020 at 4:18 am #1270237ThomasThey provide both – it’s done with a shortcode.
May 5, 2020 at 8:03 am #1270706DavidStaffCustomer SupportHmmm… this is gonna be fun.
Ok in your Hook can you add this code before the Shortcode:<a href="#" class="custom-search-toggle"> <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path> </svg> <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path> </svg> </a>
This will give us our Search Toggle to show and hide it.
Let us know when its added and ill look at the JS and CSS to make it work.
May 5, 2020 at 8:37 am #1270760ThomasOkay, it’s done.
Thanks for your help π
May 6, 2020 at 9:26 am #1272331TomLead DeveloperLead DeveloperBefore we go the custom javascript route, let’s see if we can replace the navigation search with the shortcode.
add_filter( 'generate_navigation_search_output', function() { return sprintf( '<div class="navigation-search">%s</div>', do_shortcode( '[your-shortcode]' ) ); } );
Let me know what that does π
May 6, 2020 at 10:59 am #1272528ThomasHi Tom,
I added your code and deactivated the previous one.
I think the result is quite near. It needs some styling and it would be great, if the search bar could appear right under the header (on both desktop and mobile) what do you think?
Thanks so far!!
May 6, 2020 at 3:32 pm #1272857TomLead DeveloperLead DeveloperGive this a shot:
.navigation-search { top: 100%; }
May 7, 2020 at 4:38 am #1273457ThomasHi Tom,
looks much bettet now – very nice!
Just a few design-issues left:
1. I can’t scroll through the ajax search results on mobile (the whole site scrolls instead)
2. Is it possible to to make the search bar fade in or slide in?
3. Is it possible to change the “magnifying glass” icon to a “X” icon to close when the search bar is opened?
4. The blind-text just needs to be adjusted I guess?
Thank you very much, support is amazing!
May 7, 2020 at 8:39 am #1273990DavidStaffCustomer SupportShould have known Tom would have added a filter π
Can you disable your Cache so we can look at the other changes
May 7, 2020 at 8:52 am #1274004ThomasYeah, the filter did the work quite well π
WP Rocket is now disabled.
Edit:
Would also be nice to center the search bar on the desktop version.
May 7, 2020 at 3:07 pm #1274556TomLead DeveloperLead DeveloperHi there,
1. This is because it’s set to absolute positioning.. We could make it drop down without being absolute on mobile?:
@media (max-width: 768px) { .navigation-search.nav-search-active { position: relative; order: 20; } }
2. Try this:
.navigation-search { opacity: 0; transition: opacity 500ms ease; visibility: unset; left: unset; }
3. This should do it:
.search-item.active svg:first-child { display: none; } .search-item.active svg:last-child { display: block; }
4. Which text?
5. To center it, try this:
.navigation-search { text-align: center; }
May 8, 2020 at 4:08 am #1275088ThomasThank you very much Tom,
you guys are really amazing – totally solved my issues on this one! π
One more think to bother you π
How do I manage to re-order the mobile header like this:
(Menu to the left, logo centered, search and cart right)
-
AuthorPosts
- You must be logged in to reply to this topic.