remove spacing

[manan123]

hii im using dawn theme i want to remove this space please help me with code, reference image is also attached

Website link : https://mansaroverfurnishings.com/

Current :

Reference image:

[Moeed · Accepted solution]

Hey @manan123 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.section-header {
    margin-bottom: 10px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
div#shopify-section-sections--17420665323567__header {
    margin-bottom: 10px !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Tech_Coding · Accepted solution]

Hello @manan123 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .shopify-section-group-header-group.section-header {
       margin-bottom: 0 !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman · Accepted solution]

Hello @manan123 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: 20px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, Pls replace my old code to this new code:

<style>
@media only screen and (min-width: 990px) {
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you😍

[Tech_Coding · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   summary.header__icon.header__icon--search {
     position: absolute !important;
     left: 5%;
     top: 20%;
   }
}
  .search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.predictive-search__results-groups-wrapper {
    background-color: #ffff !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Tech_Coding · Accepted solution]

Add this code also

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .predictive-search {
    background: #fff !important;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Moeed · Accepted solution]

Hey @manan123 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.section-header {
    margin-bottom: 10px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[manan123]

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
div#shopify-section-sections--17420665323567__header {
    margin-bottom: 10px !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[manan123]

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[manan123]

Thanks! but sorry i forgot to tell you that i want it for only desktop devices , please give the code again & also want white background colour of search bar

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, Pls replace my old code to this new code:

<style>
@media only screen and (min-width: 990px) {
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you😍

[manan123]

Thanks its solved , can you please help me to change the background colour of search bar also

I want it white 

[Tech_Coding · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   summary.header__icon.header__icon--search {
     position: absolute !important;
     left: 5%;
     top: 20%;
   }
}
  .search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Tech_Coding · Accepted solution]

Hello @manan123 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .shopify-section-group-header-group.section-header {
       margin-bottom: 0 !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[manan123]

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

[manan123]

Hii, Thanks but outer colour is changed but inner colour is not changed please give me updated code

[BSSCommerce-HDL · Accepted solution]

Hi @manan123, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.predictive-search__results-groups-wrapper {
    background-color: #ffff !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[manan123]

Thank you sooo  muchh!!

[BSSCommerce-HDL]

@manan123, No problem. Glad to help you 😍

[manan123]

Hii, i had encountered an bug when i go to product pages & other pages it showed liked that when i click on search icon

[BSSCommerce-HDL]

Hi @manan123, Pls replace my old code before to this new code: 

{% if template.name == 'index' %}
<style>
.predictive-search__results-groups-wrapper {
    background-color: #ffff !important;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[manan123]

its not working

[manan123]

hii, please help me there's something wrong with my image with text slider.Please help me with code

[BSSCommerce-HDL]

@manan123, Can you kindly share the details of your problem with me?

[manan123]

Slider not working properly , earlier it used to appear only three images at front & it slides when click on arrows, but now arrows are not working properly.

[manan123]

Hii, i'm using dawn theme & there's a little thing under featured collection shared ss below , please check.

My website link : https://mansaroverfurnishings.com/

[Tech_Coding]

Hello @manan123 

Add this code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  button.swym-button {
     display: none !important;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Tech_Coding · Accepted solution]

Add this code also

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .predictive-search {
    background: #fff !important;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[manan123]

Thanks man you made my day!!

[Tech_Coding]

Your welcome @manan123 😁

[manan123]

Hii, i had encountered an bug when i go to product pages & other pages it showed liked that when i click on search icon

[Tech_Coding]

you want to change the background color of search bar on home page only?

[manan123]

No, i want to change it for all pages

[Tech_Coding · Accepted solution]

Replace this code:

.search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }

   .predictive-search {
      background: #fff !important;
  }

With this code:

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
{% if template.name == 'index' %}
<style>
.search-modal.modal__content.gradient {
background: #fff !important;
}
input#Search-In-Modal, div#predictive-search-option-search-keywords {
background: #fff !important;
}
.predictive-search {
background: #fff !important;
}
</style>
{% endif %}

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[manan123]

thanks again man !!🤩🤩

[manan123]

hii, please help me there's something wrong with my image with text slider.Please help me with code

[Rahul_dhiman · Accepted solution]

Hello @manan123 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: 20px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[manan123]

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence