How can I move icons close to the center?

Store Design
, , , , , ,

Topic summary

A user seeks help repositioning icons closer to the center of their Shopify store header. Two solutions are provided:

Solution 1 (thirtycoders):

  • Navigate to Online Store → Theme → Edit code
  • Add CSS to the end of base.css file:
@media screen and (min-width: 750px) {
  .utility-bar__grid.page-width {
    padding-left: 7.2rem;
    padding-right: 7.2rem;
  }
}

Solution 2 (Made4uo-Ribe):

  • Access the same theme editor
  • Add to base.css, style.css, or theme.css:
.page-width.reward-menu {
  max-width: 80% !important;
}
  • Width percentage is adjustable based on preference

Both approaches use CSS to control header element positioning. The user is working on a Guri.store website and can choose either method depending on their specific layout needs.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I want to move those icons. Can anyone please guide me how to do it?
스크린샷 2024-04-25 051249.png

1 Like
2

Could you please share your website url?

1 Like
3

It’s Guri.store

Thank you!

4

Hi @Guribabo ,

Go to Online Store → Theme → Edit code.
please add this css to the very end of your base.css file and check

@media screen and (min-width: 750px) {
    .header.page-width, .utility-bar__grid.page-width {
        padding-left: 7.2rem;
        padding-right: 7.2rem;
    }
}

Thanks!

thirtycoders_0-1713991987047.png
thirtycoders_0-1713991987047.png1024×570 34.5 KB

1 Like
5

Hi @Guribabo

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 “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.page-width.drawer-menu {
  max-width: 80% !important;
}

And Save.

result:

Made4uoRibe_0-1713992304576.png
Made4uoRibe_0-1713992304576.png1901×293 20.5 KB

Note: You can adjust the width of your choice.

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

1 Like