[Resolved] Search Button Customization

[Sourabh]

i have not installed any gutenberg plugin…its gutentor plugin but my entire website is made by this plugins only.

I replaced your CSS and its fine but how to add a search icon or text, as each one don’t press enter after typing, ppl use a mouse to click on search..however, instead of the search icon it’s close icon there (Refer snapshot). So either search icon or search button is good to have before the close option.

[David]

Hi there,

you can add a search button to the navigations search with this PHP Snippet:

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="submit" class="search-submit" value="' . esc_attr_x( 'Search', 'submit button' ) . '" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

And some CSS to align it:

.navigation-search.nav-search-active {
    display: flex;
    padding-right: 60px;
}

[Sourabh]

Added, nothing happens…

[David]

Make sure you remove the Code that Elvin provided here:
https://generatepress.com/forums/topic/search-button-customization/#post-1834173

[Sourabh]

Make sure you remove the Code that Elvin provided here:

You should tell that along with your CSS then.

Anyways deleted and the button visible but need something else to make it fit, it more worse in sticky – refer to both snapshots…

[David]

I would have said that if knew you were already using the same filter – i had to look back across the 2 pages of this topic to see the 🙂

Replace the CSS i provided with:

.main-navigation.is_stuck .inside-navigation {
    position: relative !important;
}

.navigation-search {
    display: flex;
    align-items: center;
    padding-right: 70px;
    background: #fff;
}
/* button styling */
.main-navigation input[type="submit"].search-submit {
    background-color: #fff;
    color: #000;
    border: 1px solid;
    height: auto !important;
    padding: 8px 24px;
}

[Sourabh]

Ohh, Okay I am Sorry.

Applied and it’s working well on the desktop but odd for the mobile version (Refer Snapshot Link 1).

So the Auto height of the search button is not good.. Want to reduce the height of the search button so that it can be fit in desktop and mobile both..(Snapshot link 2 ).

Also small shift of button towards the right (for mobile only).

Lastly – when clicking for search and the box appears so the box outer BG color should be green as per theme (#1d2d06), however, the inner should be white something like the Newsletter of the footer (snapshot link 3).

So just need a small height setting (and right shift for mobile only) for the search button and Background colors…

[David]

To adjust the height of the search button – I edited the CSS above – you will see this additional line;

padding: 8px 24px;

The first value 8px is the top/bottom ( controlling the height ). And the 24px is the left and right padding.

To change the color of the header when the search is open would require custom development as it would require changing the mobile header background colors when the search is open – and theres no way to check the search is open to apply those styles.

[Sourabh]

Thanks, David, I got your point but I raised that concern because the sticky header search box is merging with the body when scrolling, we can’t find the difference, so can we draw a line below the sticky header when scrolling so that it will separate the search box.. (Snapshot attached for more understanding)…

And the button looking cool but exactly big in mobile so how to make it responsive for mobile (a bit smaller in mobile), also need a little shift towards the right (the gap is over in mobile)… Again padding from the left has been vanished as the search bar again starting from the corner (Highlighted in the snapshot)…

[Tom]

To add a line when it’s sticky, try this CSS:

.navigation-stick {
    border-bottom: 1px solid #ddd;
}

I’m not seeing any responsive issues with the button on mobile – did you resolve that?

[Sourabh]

Yes, I have reduced the size of the search button, but could not fix the gap and text inside the search button…

Refer snapshot, I want to fix that extra space between the cross and search button (want to shift it to right), and the gap between search and cross also want to fix (it seems extra gap in the mobile version).

So the gap between button and cross (as shown in the snapshot), and then both move towards the right (for mobile device only), and inside search button that text want to make a bit small for the mobile device only, how to do it??

[David]

Add this CSS:

@media(max-width: 768px) {
    .navigation-search {
        padding-right: 55px;
    }
    .main-navigation input[type="submit"].search-submit {
        font-size: 14px;
        padding: 8px 24px;
    }
}

You can’t reduce the padding below 55px as the search button will fall behind the Close X

[Sourabh]

You can’t reduce the padding below 55px as the search button will fall behind the Close X

Okay Fine….

What about text inside button??? (can we reduce that by one or two font size)??

[David]

Edit the CSS here – includes a rule for the search-submit – with its font-size and padding properties for you to change.

[Sourabh]

Fine, Thanks DVD

[Author]

Posts