[Support request] Navigation search box adjustments Width and style

[John MacKenzie]

Hi Guys

is there a way to

1) set the nav search to actually show as a BOX instead of the search icon, and have prefilled (grey ) information on it?
and or 2) make the search box NOT overlay the actual menu of the site when it opens up?

thanks!

url is hidden currently.

[David]

Hi there,

so i use this CSS to change the background color of the search field and to move it below the navigation:

.navigation-search {
    top: 100%;
    background-color: #fff;
}

And if you want to add a placeholder text then this PHP snippet does that:

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

[John MacKenzie]

Hi David

thanks, i dont want to move it below the navigation though, i still want it int he right side of the nav line, just not expanding over top of the navigation items?

thanks
John

[David]

Try this CSS:

.navigation-search.nav-search-active {
    max-width: 400px;
    left: auto;
}

[John MacKenzie]

Hi David Thanks! well the layout is changing and now i am just doing the search and cart in a secondary menu on their own

i tried the code from here https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder and your stuff above but it didnt change anything, do i need to adjust since its in a secondary menu now?

also maybe i can share a login privately so you can see?

thanks!
John

[Leo]

Any chance you can unlock the maintenance page for now?

We don’t need the dashboard access just yet.

Let me know 🙂

[John MacKenzie]

ive disabled the coming soon module for now. thanks and let me know

John

[Tom]

Hi there,

Just taking a look at this. It looks like the navigation search is within the header, not the main nav? What if you just used a “Search” widget in the “Header Widget” area? Then we could likely use a little simple CSS to make it align where you want it.

Let me know 🙂

[John MacKenzie]

Hi Tom

i guess so sure, can i add the shopping cart icon to the same widget? if so i am open to that.

[Tom]

Ah, in that case, it’s likely easier to continue with the navigation search.

Any chance you can remove the coming soon page again, or send us temp login details so we can bypass it?: https://generatepress.com/contact

Let me know 🙂

[John MacKenzie]

hi Tom

thanks, ive turned it off for now again.

John

[Tom]

It looks like you have two navigation search inputs in the secondary nav area – are you adding another one with PHP?

Other than that, you should be able to do this:

.navigation-search {
    visibility: visible;
    position: relative;
    left: auto;
    opacity: 1;
    pointer-events: auto;
}

#secondary-navigation .inside-navigation {
    display: flex;
    align-items: center;
}

#secondary-navigation .search-item {
    display: none;
}

Let me know 🙂

[John MacKenzie]

Hi Tom

no ive not added anything else with php?

these are the functions i have maybe something from that?

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

/* move cart to secondary menu */
add_filter( 'generate_woocommerce_menu_item_location', 'tu_move_menu_cart_item' );
function tu_move_menu_cart_item() {
    return 'secondary';
}

/* move search to secondary menu */
add_action( 'after_setup_theme', 'tu_move_nav_search' );
function tu_move_nav_search() {
	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', 'tu_secondary_menu_search_icon', 10, 2 );
function tu_secondary_menu_search_icon( $nav, $args ) {
	$generate_settings = wp_parse_args(
		get_option( 'generate_settings', array() ),
		generate_get_defaults()
	);

	if ( 'enable' !== $generate_settings['nav_search'] ) {
		return $nav;
	}

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

	return $nav;
}

/* have search  check woocommerce products */
add_filter( 'generate_navigation_search_output', function() {
    printf(  
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
            <input type="hidden" name="post_type" value="product" />
        </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr( get_search_query() ),   
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

/* add placeholder text in the search box */
add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Enter your 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', 'search artists or products ' ) 
    ); 
} );

thanks!

[Tom]

Instead of these two functions:

/* have search  check woocommerce products */
add_filter( 'generate_navigation_search_output', function() {
    printf(  
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
            <input type="hidden" name="post_type" value="product" />
        </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr( get_search_query() ),   
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

/* add placeholder text in the search box */
add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Enter your 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', 'search artists or products ' ) 
    ); 
} );

Combine them into one:

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

Is the CSS I provided above getting us closer to a solution?

Let me know 🙂

[John MacKenzie]

thanks that helps. The placeholder text only seems to appear onee you click on the search box. how do i get it to show before the search field is clicked on (and still show a magnifying glass as well in the box on the right?

also how to style the background colour to match the blue of the cart icon?

thanks!
John

[Author]

Posts