Header search box customisation

Lennon-Deng
New Member
2 0 0

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

Screen Shot 2020-08-13 at 12.22.01 PM.png

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

Screen Shot 2020-08-13 at 12.36.37 PM.png

Any help would be appreciated!

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

0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Lennon-Deng
New Member
2 0 0

Hi Diego, 

Thanks for the reply.

The URL has been updated on the description message.

Warmest regards,

Lennon

0 Likes