[Resolved] Show search box in navigation?

[Karen Mobbs]

Hello

In an earlier version of GeneratePress, the search in the navigation appeared as a text box that was always visible and obvious for the user to type text into.

Now that I have updated, it appears simply as the search icon (magnifying glass) and the input box only appears when the magnifying glass is clicked on.

How can I get it back to the earlier version – where the text box is already visible?

Karen

[Tom]

Hi Karen,

That’s odd – the navigation search has looked like it is now since I introduced it – not sure why yours wouldn’t have had the style.

You can disable the built in navigation search, and then follow the instructions found here: https://wordpress.org/support/topic/generatepress-search-how-to-change-visual-display

Let me know if you have any questions 🙂

[Karen Mobbs]

My apologies Tom! I realise now that I was using a widget to control the search and not using the one available in GeneratePress through the navigation search setting.

So sorry for bothering you. I updated a number of things at once so got confused.

[Karen Mobbs]

So, now a slightly different question. I have modified navigation.php to get the search widget where I want it. How could I do that in a child theme properly to avoid changing any files in GeneratePress?

[Tom]

What exactly did you modify in navigation.php? A specific function or a few different functions?

[Karen Mobbs]

I modified the function generate_navigation_position() only.

[Tom]

Can you show me what you did to it? You may be able to use a hook instead 🙂

[Karen Mobbs]

/**
*
* Build the navigation
* @since 0.1
*
*/
function generate_navigation_position()
{
?>
<nav itemtype=”http://schema.org/SiteNavigationElement&#8221; itemscope=”itemscope” id=”site-navigation” role=”navigation” <?php generate_navigation_class(); ?>>

<?php do_action(‘generate_inside_navigation’); ?>
<h3 class=”menu-toggle”><span class=”mobile-menu”><?php echo apply_filters(‘generate_mobile_menu_label’, __( ‘Menu’, ‘generate’ ) ); ?></span></h3>

“><?php _e( ‘Skip to content’, ‘generate’ ); ?>

<?php
wp_nav_menu(
array(
‘theme_location’ => ‘primary’,
‘container’ => ‘div’,
‘container_class’ => ‘main-nav’,
‘menu_class’ => ”,
‘fallback_cb’ => ‘generate_menu_fallback’,
‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s ‘ . join( ‘ ‘, generate_get_menu_class() ) . ‘”>%3$s‘
)
);
?>
<?php if ( is_active_sidebar(‘header’) ) : ?>

<?php dynamic_sidebar( ‘header’ ); ?>

<?php endif; // end sidebar widget area, added by Karen to get search widget into navigation area ?>

<!– .inside-navigation –>

</nav><!– #site-navigation –>
<?php
}

[Karen Mobbs]

<?php if ( is_active_sidebar(‘header’) ) : ?>

<?php dynamic_sidebar( ‘header’ ); ?>

<?php endif; // end sidebar widget area, added by Karen to get search widget into navigation area ?>

[Karen Mobbs]

<?php if ( is_active_sidebar('header') ) : ?>
				<div class="header-widget">
					<?php dynamic_sidebar( 'header' ); ?>
				</div>
			<?php endif; // end sidebar widget area, added by Karen to get search widget into navigation area ?> 

[Karen Mobbs]

Sorry, had trouble putting code in to show you!

Last post shows bit of code I entered into generate_navigation_position(), shown in bold partly in my post where I tried to copy all of the function in.

Hope that makes sense.

[Tom]

Interesting, so I’m assuming you removed the header widget area from the header as well then?

In the most recent versions of GP, this nav position function is overwrite-able.

Basically, grab this function, and then add your code to it.

if ( ! function_exists( 'generate_navigation_position' ) ) :
/**
 *
 * Build the navigation
 * @since 0.1
 *
 */
function generate_navigation_position()
{
	?>
	<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" id="site-navigation" role="navigation" <?php generate_navigation_class(); ?>>
		<div class="inside-navigation grid-container grid-parent">
			<?php do_action( 'generate_inside_navigation' ); ?>
			<h3 class="menu-toggle">
				<?php do_action( 'generate_inside_mobile_menu' ); ?>
				<span class="mobile-menu"><?php echo apply_filters('generate_mobile_menu_label', __( 'Menu', 'generate' ) ); ?></span>
			</h3>
			<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'generate' ); ?>"><?php _e( 'Skip to content', 'generate' ); ?></a></div>
			<?php 
			wp_nav_menu( 
				array( 
					'theme_location' => 'primary',
					'container' => 'div',
					'container_class' => 'main-nav',
					'menu_class' => '',
					'fallback_cb' => 'generate_menu_fallback',
					'items_wrap' => '<ul id="%1$s" class="%2$s ' . join( ' ', generate_get_menu_class() ) . '">%3$s</ul>'
				) 
			);
			?>
		</div><!-- .inside-navigation -->
	</nav><!-- #site-navigation -->
	<?php
}
endif;

Then add it using one of the methods here: http://generatepress.com/knowledgebase/adding-php-functions/

[Karen Mobbs]

Thank you very much Tom!

That works properly in my child theme now.

Karen

[Tom]

Awesome 🙂

[Anonymous]

Hi Tom,

I realize that this post is older although it raises a question that I’m attempting to solve.

The customizer offers the option to introduce a navigation icon in the primary menu. There does not however appear to be an option to change this to a text form with a submit button.

Is there a way to achieve this without changes to the PHP code?

[Author]

Posts