[Resolved] Change the search bar style in Split Template

[Christine]

Hi,

I am looking for a different layout for Search bar on my website: https://staging.gartersandco.com.au/

The current layout is like search bar open up above menu.

Is there was to change that ?

[Leo]

Hi there,

So how would you like to style it?

[Christine]

Like this http://www.list25.com/

We have a code available here…
https://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/

Will you please help me in applying/styiling it?
Regards

[Tom]

Hi there,

Is something like this along the right lines?:

.navigation-search.nav-search-active {
    left: auto;
    width: 300px;
    top: 100%;
    padding: 20px;
    background: #fff;
}

.navigation-search.nav-search-active input {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: auto;
}

.navigation-search {
    top: 150%;
    transition: opacity 300ms ease-in-out, top 300ms ease-in-out;
    left: auto;
}

[Christine]

Thank you very much Tom. It is right. Will you please add a search icon to it like http://prntscr.com/ogwq6l?

Looking forward!

Thanks

[Tom]

Hi there,

First, add this PHP: https://gist.github.com/generatepress/565683b10cca65050d7fb3a006efbc29

Then, add this CSS:

.navigation-search.nav-search-active .search-button {
    position: absolute;
    right: 30px;
    top: calc(50% - 15px);
    height: 30px;
    display: block;
    content: "\f002";
    font-family: GeneratePress;
    opacity: .5;
    width: auto;
    background: transparent;
    color: #000;
    border: 0;
    padding-left: 5px;
    padding-right: 5px;
}

[Christine]

Hey Tom. You are the Best! It worked!!!!
Thank you for your extra ordinary Support.

Regards

[Tom]

You’re welcome 🙂

[Author]

Posts