Move section from middle to left position?

Store Design
, , , , , , ,

Topic summary

A user seeks help repositioning a circular menu section from center to left alignment on desktop devices for their Shopify jewelry store collection page.

Initial Problem:

  • The circular navigation element appears centered on the collection page
  • User wants it left-aligned on desktop only (mobile unchanged)
  • Provided website link and visual mockup showing desired layout

Solutions Offered:
Multiple developers provided CSS code snippets to be added to the theme.liquid file above the </body> tag. The solutions involved:

  • Custom CSS targeting the specific bubble slider element
  • Media queries to apply changes only on screens 749px+ width
  • Adjustments to margin-left, padding-left, and max-width properties

Resolution:

  • User confirmed the solution from @pawankumar worked successfully
  • The circular menu section now displays left-aligned on desktop as requested
  • Issue marked as resolved
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi, can someone help me move this section from middle to left (only on computer device)

(I have attached photos below - the blue part is what i want to get replaced)

Link for my website.: https://www.melchiorjewelry.com/collections/deluxe-moonstone-collection

Thank you so much, hope someone can help me out here!

Skærmbillede 2024-09-20 kl. 18.17.34.jpg
Skærmbillede 2024-09-20 kl. 18.17.34.jpg2543×1300 171 KB

.

.

.

.

.

.

.

.

@GemPages_Agents

@KetanKumar

@hammadCodes

@PaulNewton

@Ninthony

@dmwwebartisan

@ExpertRookie

@MandasaTech

@GemPages

@Mike-Omega

@PageFly-Richard

@tobebuilds

@BSSCommerce-B2B

@BSS-TekLabs

1 Like
2

Hey @stinem123

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 tag

RESULT:

Moeed_0-1726850864110.png
Moeed_0-1726850864110.png1566Ă—703 186 KB

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

Best Regards,
Moeed

1 Like
3

Hi @Moeed , I dont understand how this worked at the photo you sent, because when I added the code it only moved the sections around, and not the circle section - I have attached before and after photos for you below. Thanks!

Skærmbillede 2024-09-20 kl. 18.54.02.png
Skærmbillede 2024-09-20 kl. 18.54.02.png2992×1630 428 KB

Skærmbillede 2024-09-20 kl. 18.53.56.png
Skærmbillede 2024-09-20 kl. 18.53.56.png2992×1630 426 KB

4

Hi @stinem123
Please put this css in theme.liquid before body closing tag

Thanks!

1 Like
5

Hey @stinem123

Try this updated code and let me know.

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

Best Regards,
Moeed

6

Hi @stinem123

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

@media only screen and (min-width: 749px){
.bubble-slider-template--23686647742812__ss_circle_menu_pro_wwUxBG {
    margin-left: 0 !important;
    padding-left: 3.3vw !important;
}
}

And save.

Result:

Made4uoRibe_0-1726852296281.png
Made4uoRibe_0-1726852296281.png1646Ă—552 80.3 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

Hi @stinem123 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1726852168358.png
BSSCommerceB2B_0-1726852168358.png400Ă—195 26.3 KB

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (min-width: 768px) {
  .bubble-slider-template--23686647742812__ss_circle_menu_pro_wwUxBG {
    max-width: unset !important;
    margin-left: 60px !important;
  }
}

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1726852296019.png
BSSCommerceB2B_2-1726852296019.png1554Ă—842 199 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

1 Like
8

Thank you so much @pawankumar , this worked great! Really appriciate!