Topic: Return to expandable search box in nav

vuduproject
July 10, 2023 at 11:39 pm

tnx! look at the work so far
Fernando
July 10, 2023 at 11:45 pm

You’re welcome! Which specific icon did you change? I’m not seeing any changes. Perhaps I’m seeing a cached version of the site?
vuduproject
July 11, 2023 at 10:48 am

I Want to change menu-bar-item of off-canvas-open and close icon into searchbox nav… I would like to change these icons but I can’t find the hook in the ones you wrote to me

Fernando

July 11, 2023 at 4:39 pm

Try this:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path d="M768 306.2V383H256v-76.8h512zM256 536.6h512v-76.8H256v76.8zm0 153.6h512v-76.8H256v76.8z" fill-rule="evenodd"/></svg>';
	
		$classes = array(
			'gp-icon',
			'icon-' . $icon,
		);
	
		return sprintf(
			'<span class="%1$s">%2$s</span>',
			implode( ' ', $classes ),
			$output
		);
	}
if ( 'pro-close' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path d="M768 306.2V383H256v-76.8h512zM256 536.6h512v-76.8H256v76.8zm0 153.6h512v-76.8H256v76.8z" fill-rule="evenodd"/></svg>';
	
		$classes = array(
			'gp-icon',
			'icon-' . $icon,
		);
	
		return sprintf(
			'<span class="%1$s">%2$s</span>',
			implode( ' ', $classes ),
			$output
		);
	}

    return $output;
}, 15, 2 );

Replace the SVGs with yours. Let us know how it goes.

vuduproject
July 11, 2023 at 11:46 pm

tnx. The bars menu works but
Icon close doesn’t work. I need to change the one in search box that appears on click in the nav menu. PS. can i use the same method with the search icon?
Fernando
July 12, 2023 at 12:09 am

Let’s address the close icon first.

The close icon change code should work. Can you share the code you’re using? We’ll check why it isn’t working.

vuduproject

July 12, 2023 at 12:17 am

the code is the default one of the old navbar previous to the modal one, i just added this

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="buttonSearch search-form navigation-search" action="%1$s">
		    <button class="material-symbols-outlined">search</button>
            <input type="search" placeholder="Search" class="search-field" value="%2$s" name="s" title="%3$s"  />
			
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

on click search adds these classes menu-bar-item search-item active close-search on the span

Fernando
July 12, 2023 at 12:26 am

I see. To clarify, are you referring to this close icon instead?: https://share.getcloudapp.com/nOuL5yXr
vuduproject
July 12, 2023 at 12:31 am

yes!! I would likes to change the close icon
David
July 12, 2023 at 2:49 am
This article provides the filter and the various values for changing the icon.
You can use the close value in the filter eg.
```
add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'close' === $icon ) {
        $output = 'your svgs goes here';
    }
	
    return $output;
}, 10, 2 );
```
You need to change your svgs goes here for your SVG
vuduproject
July 13, 2023 at 10:32 am

Thank you very much it doesn’t solve my problem being two svg icons together but it made me understand a few things. Good job and thanks for now
David
July 13, 2023 at 10:26 pm

OK, let us know if you need any further assistance

Glad we could be of help

Viewing 12 posts - 17 through 28 (of 28 total)

← 1 2

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Return to expandable search box in nav