Header search box customisation

[Lennon-Deng]

Hi there,

We are trying to add a margin on the right side of search box, i have tried to input some code on it, unfortunately it is not responding.

.header-search-form {
  display: block;
  min-width: $header-icon-search;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0;

  .header-search-expanded & {
    padding-right: $header-icon-search;
  }

  @include breakpoint(m-up) {
    display: inline-block;
  }
}
.header-main-content {
    padding-right: 10px !important;
    padding-left: 10px;
}

@media (min-width: 1080px){
.header-search-form {
    padding-right: 90px !important;
}}
input.header-search-input {
  @include font($font-body);
  display: inline-block;
  width: 100%;
  padding: $local-search-form-padding $header-icon-search $local-search-form-padding $local-search-form-padding;
  margin: 0;
  font-size: rem($local-search-form-font);
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid #000000;
  border-radius: 2px;
  outline-offset: 0;
  opacity: 1;

  @include breakpoint(m) {
    position: relative;
    right: -1 * $header-icon-search;
    opacity: 0;
    transition: all 0s $ease-out-quad;

    .header-search-expanded & {
      right: 0;
      opacity: 1;
      transition-duration: 0.2s;
    }
  }
}

input[type="submit"].header-search-button,
.header-search-button-close {
  @extend %button-reset;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: inline-block;
  width: $header-icon-search;
  height: 100%;
  padding: 0 12px;
  margin: 0 30px;
}
input[type="submit"].header-search-button {
  @extend %icon;
  font-size: rem(16px);
  line-height: 1;
  color: #000000;
  vertical-align: middle;
  background: transparent;

  .header-search-expanded & {
    right: $header-icon-search;
  }
}

Currently, it is looking like that, so there is no margin on the right side

And we wanted it to be like that, a small margin on the right

Any help would be appreciated!

Site URL: https://welfire1-197.myshopify.com/

[diego_ezfy]

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

[Lennon-Deng]

Hi Diego, 

Thanks for the reply.

The URL has been updated on the description message.

Warmest regards,

Lennon