[Resolved] Double search icon on main and secondary navigation bars

[Alex]

I found the following code to display search icon on secondary navigation bar. Unfortunately, when switching to flexbox, which is my current mode, the icon shows up on both main and secondary bars. Could you please help to remove it from the main bar?

/*Search icon in secondary menu*/
add_action( 'after_setup_theme', function() {
	remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
	remove_action( 'generate_inside_navigation', 'generate_mobile_menu_search_icon' );
	
	add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' );
	add_action( 'generate_inside_secondary_navigation', 'generate_mobile_menu_search_icon' );
	
	remove_filter( 'wp_nav_menu_items', 'generate_menu_search_icon', 10, 2 );
} );

add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
	$generate_settings = wp_parse_args(
		get_option( 'generate_settings', array() ),
		generate_get_defaults()
	);

	if ( 'enable' !== $generate_settings['nav_search'] ) {
		return $nav;
	}
	
	if ( 'secondary' === $args->theme_location ) {
		$icon = generate_get_svg_icon( 'search', true );
		return $nav . '<li class="search-item" title="' . esc_attr_x( 'Search', 'submit button', 'generatepress' ) . '"><a href="#">' . $icon . '<span class="screen-reader-text">' . _x( 'Search', 'submit button', 'generatepress' ) . '</span></a></li>';
	}

	return $nav;
}, 10, 2 );

[Tom]

Hi there,

This might help: https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Hi Tom! Yes, it works perfectly. But when the icon is clicked the search bar appears behind the main navigation bar and I can see only the very top of the input text.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Yes, Leo.

[David]

Hi there,

this CSS to stop the duplicate form from appearing:

#mobile-header .navigation-search.nav-search-active {
  display: none;
}

Then CSS to moke sure the form is in front of the header:

.navigation-search.nav-search-active {
  z-index: 10000;
}

Then you need to edit your CSS that is increasing the search input font size ie. this:

.navigation-search input[type="search"], .navigation-search input[type="search"]:focus {
  background: #fff;
  color: #4d4d4d;
  text-align: center;
  font-size: 50px;
  font-style: bold;
  height: 100px; /* include a height value thats greater than font size */
}

And give it a height value.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Thanks, David! The code works just fine, but when the search bar is active, there is no visible cross icon to escape it.

[David]

Add this CSS:

.search-form.navigation-search.nav-search-active {
  top: 40px;
}

And in the CSS above you can adjust the forms height:

height: 100px; /* include a height value thats greater than font size */

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

That’s fine, David! You guys and your great team are real coding Jedi 🙂

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts