Custom Search in Header

Ok so replace all of the old CSS with this:

/*-- Navigation Alignment CSS --*/
.inside-header {
    display: flex;
    align-items: center;
}
.header-widget {
    order: 5;
    top: unset !important;
}

.main-navigation {
    margin-left: auto;
    margin-right: auto;
}

/*--  Search Form Styling --*/
.search-form {
    display: flex;
}

.search-form>* {
    border-radius: 50px;
}

/* Style search field */
.widget .search-field {
    max-width: 20ch;
    font-size: 16px;
    text-transform: lowercase;
    font-weight: bold;
    border: none;
    background-color: transparent;
    color: #000;
    padding: 2px 7px;
}

/* Add radius and Shadow */
.header-widget {
    border-radius: 50px;
    background-color: #fff;
    padding: 5px;
    box-shadow: 0 6px 25px -5px rgba(40, 100, 255, 0.25);
}

.nav-float-right .header-widget .widget {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

Thanks, David!

A few issues:

1) Can't see text as you type. The text is white/invisible as you're typing search term - white/white = invisible. But when you hit enter, it appears suddenly black.

2) Elipses are still there - can we delete them?

3) I'm trying to increase max width of search, and it won't respond when I get to a certain number. Want to try 50ch, but it's not responding.

I really appreciate it!

Hi there,

1. Try adding this:

.header-widget .search-field:focus {
    color: #000;
}

2. Add this PHP:

add_filter( 'generate_search_placeholder', function() {
    return 'Search';
} );

3. Where you specify the width, try this instead:

width: 20ch;
max-width: 100%;

Absolutely phenomenal support for this theme - I love it!

Thank you very much!

Glad we could be of help