Header search customisation

Solved
Highlighted
Tourist
3 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

Ruby_Hague_0-1597283435797.png

 

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

Ruby_Hague_1-1597283435795.png

 

Any help would be appreciated!

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

0 Likes
Highlighted
Astronaut
1083 178 213

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (min-width: 767px){
.main-header .header-content-right {
position: relative;
right: 30px;
}

}


You can adjust the 30px to your liking.

Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
3 0 0

Hi there,

Thanks for the reply.

I have copied and pasted the code into our CSS file, it is working fine. However is there any chance to shorten the input box instead of moving the whole block towards to the right?  Details showed below. 

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

Also, it is wired that the "search" button is moving along with the block as well. Will it be better if i remove the "margin" for the search button?

Kind regards 

0 Likes
Highlighted
Astronaut
1083 178 213

This is an accepted solution.

To make the search field shorter use this: 

@media (min-width: 767px){
.main-header .header-content-right form > input:nth-child(1){
    max-width: 140px;
}

.main-header .header-content-right form > input:nth-child(2){
        margin: 0 !important;
}



}


Use this in conjunction with the previous code to push it the left/right. 
For the right code that I showed you previously you can also use negative values if necessary, like -30px

In this code, the 140px is also editable, you can use any value you like.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
3 0 0

Hi Diego,

Awesome, thank you so much for helping us out with that. The result is really amazing, we cannot be happier with that.

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

Warmest regards

0 Likes
Highlighted
Astronaut
1083 178 213

It's my pleasure, good friend. Wishing you a good week.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes