[Resolved] CSS Selector for search icon in menu

[Bright Idiots]

Hello Generatepress-team,

I’m looking for the CSS Selector of the search icon in the menu. I need this to add search via Grow.me (Mediavine).

Thanks!

Ruud

[Fernando]

Hi Ruud,

Which Search are you using? Is it the one from GP or WordPress? Can you provide the link to the site in question for reference?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Bright Idiots]

Hello Fernando,

Yes, it’s standard Generatepress/Wordpress for now. But I want to extend this with some more functionality via Grow.me. Find the details in the private field.

Thanks!

[Fernando]

I see. Can you try this selector?:

.menu-bar-items > .menu-bar-item a[aria-label="Open zoekbalk"]

[Bright Idiots]

This doesn’t seem to work yet, do you have other options?

[David]

Hi there,

would it make more sense to just have a dedicated search icon that opens the grow me search ?
If so:

1. In Appearance > Elements –> Add New —> Hook.
2. Add the following HTML / PHP to the text area:

<button id="grow-me-search" class="menu-bar-item search-item">
	<?php echo generate_get_svg_icon( 'search', true ); ?>
</button>

3. Set the Hook to generate_menu_bar_items
4. Check Execute PHP
5. Set the Display Rules to Entire Site

This will output the search icon in the a button that has the ID of grow-me-search – you can change that to what you like in the above code.

[Bright Idiots]

Thanks David!

This adds another search button to the header, but doesn’t seem to work (yet). The issues:

1. The selector doesn’t seem to work, but I’ll check this with MediaVine. This looks ok now
2. There are 2 search icons now in the menu, when I remove the initial one via: Custmoizer>Layout>Manin navigation, the added but doesn’t work anymore.
3. The styling is a bit off for the new button.

Edit: Seeing a JS-error in console when after clicking the search icon:

navigation-search.min.js?ver=3.2.4:1 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
    at HTMLSpanElement.s (navigation-search.min.js?ver=3.2.4:1:891)

Thanks!

[David]

Change the hooks HTML to this:

<span id="grow-me-search" class="menu-bar-item search-item">
	<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 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>
</span>

it will require some CSS to style but we can deal with that in a moment.

And then disable the Navigation Search in the Customizer > Layout > Primary Nav to remove the original one.

[Bright Idiots]

Hey David,

This works, thanks!

Can you tell me which CSS-class to use to make the icon white?

Thanks!

[David]

You can use the ID you added eg>

/* set svg fill to match current color of menu */
#brightidiots-search svg {
    fill: currentcolor;
}
/* set the color for hover */
#brightidiots-search:hover {
    color: var(--accent);
}
/* add a little padding and make the cursor a pointer */
#brightidiots-search {
    padding: 0 5px;
    cursor: pointer;
}

[Bright Idiots]

Thanks for your support David, this works perfectly!

[David]

Glad to hear that!

[Author]

Posts