[Support request] Navigation search box adjustments Width and style

Home Forums Support Navigation search box adjustments Width and style

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #985307
    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.

    #985589
    David
    Staff
    Customer Support

    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

    #985847
    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

    #986017
    David
    Staff
    Customer Support

    Try this CSS:

    .navigation-search.nav-search-active {
        max-width: 400px;
        left: auto;
    }
    #986027
    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

    #986075
    Leo
    Staff
    Customer Support

    Any chance you can unlock the maintenance page for now?

    We don’t need the dashboard access just yet.

    Let me know 🙂

    #986083
    John MacKenzie

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

    John

    #986172
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #986207
    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.

    #986669
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #986690
    John MacKenzie

    hi Tom

    thanks, ive turned it off for now again.

    John

    #986849
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #986874
    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!

    #987376
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #991924
    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.