Moving header search form

Public Ticket #18125

Conversation thread

LazyBit replied

4 years ago

Customer Reply

Your fix works perfectly, thank you.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (max-width: 767px) {
    .header-search-style-default #navigation.header-6 .show-search {
        height: 58px;
    }
    #navigation.header-6 .pcheader-icon>a,
    .header-search-style-default #navigation.header-6 .show-search a.close-search {
        height: 58px;
        line-height: 58px;
    }
    .header-search-style-default #navigation.header-6 .show-search form.pc-searchform input.search-input {
        height: 58px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

Regards,
PenciDesign.

LazyBit replied

4 years ago

Customer Reply

It works great now, thank you!

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've updated the custom CSS code & purge all site cache.

Please check.

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

#navigation.header-6 .show-search form.pc-searchform input.search-input {
    padding-right: 100px;
}

Regards,
PenciDesign.

LazyBit replied

4 years ago

Customer Reply

Hi dev,

After the update to Soledad 8.0 search form padding-right only works while header is sticky. How to fix?

LazyBit replied

5 years ago

Customer Reply

Great, thank you.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Your code is perfect and has nothing that needs to improve.

Couldn’t have done it better myself.

Regards,
PenciDesign.

LazyBit started the conversation

5 years ago

Conversation Start

Hi dev,

I managed to align the search form to the right and increase font size for a better UX. I added following CSS:

#navigation.header-6 .show-search form.pc-searchform input.search-input {
    text-align: right;
    padding-right: 100px;
    font-size: 16px
}
.is-sticky #navigation.header-6 .show-search form.pc-searchform input.search-input {
    padding-right: 100px;
}

I'm happy with result, anyway I would like to know if there is a better way to achieve it. Maybe my CSS code can be optimized or something, please let me know.

Want to join this conversation or access attachments? Sign in first.