Reduce gap between sections

[DULHANJEWELS]

 Hey I want to reduce the gap between accouncement bar and circles menu also the gap between the circle menu and slider, can someone pls provide me codes to reduce the gap on both mobile and desktop ?

my site link is - Dulhanjewels.com

[Moeed · Accepted solution]

Hey @DULHANJEWELS 

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>
.sf-circle-menu-header {
    margin: 5px !important;
}
.sf-circle-menu-grid {
    padding-bottom: 0 !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[niraj_patel]

Hello @DULHANJEWELS 

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 (max-width: 767px){
.sf_template--22895480996146__animatedinsta_jQPjTi .sf-circle-menu-grid {
padding-bottom: unset !important;
}
  .sf_template--22895480996146__animatedinsta_jQPjTi .sf-circle-menu-header {
      margin: unset !important;
  }

}
</style>

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

[BSSCommerce-HDL]

Hi @DULHANJEWELSm, 

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

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

.sf-circle-menu-header {
    margin: 0px 0px 10px 0px !important;
}

.sf-circle-menu-grid {
    padding-bottom: 5px !important;
}

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 😍

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @DULHANJEWELS  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>

@media screen and (max-width: 767px){
.sf-circle-menu-grid{
  padding-bottom: 0px !important;
}
.sf-circle-menu{
  margin-top: -20px !important;
}
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[Rahul_dhiman]

Hello @DULHANJEWELS 
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.liquid
and add this code in the bottom of the file above </body> tag

<style>
.sf-circle-menu-header {
margin: 10px !important;
}
.sf-circle-menu-grid {
padding-bottom: 0 !important;
}
</style>

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks