Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2881517
Moving header search form
Closed

Comments

  • LazyBit started the conversation
    September 27, 2021 at 10:57am

    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.

  •  2,492
    PenciDesign replied
    September 27, 2021 at 3:28pm

    Hi,

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

    Couldn’t have done it better myself.

    Regards,
    PenciDesign.


  • LazyBit replied
    September 27, 2021 at 3:52pm

    Great, thank you.

  • LazyBit replied
    October 1, 2021 at 7:08am

    Hi dev,

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

  •  2,492
    PenciDesign replied
    October 1, 2021 at 8:17am

    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 privately
  •  2,492
    PenciDesign replied
    October 1, 2021 at 12:04pm

    Hi,

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

    Please check.

    Regards,
    PenciDesign.


  • LazyBit replied
    October 1, 2021 at 1:14pm

    It works great now, thank you!

  •   LazyBit replied privately
  •  2,492
    PenciDesign replied
    October 15, 2021 at 3:19pm

    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
    October 15, 2021 at 3:24pm

    Your fix works perfectly, thank you.