Moving Brand Name In Header and Text In footer

Store Design
, , , , ,

Topic summary

A store owner using the Origin theme needed help repositioning two elements: moving their brand logo to the right so a background border falls between the two ‘L’ letters, and shifting footer text to the left edge of the page.

Solutions Provided:

Multiple developers offered CSS code snippets targeting:

  • Logo positioning via .header__heading-link or h1.header__heading with padding-left adjustments
  • Footer alignment using .footer__content-bottom-wrapper with margin-left: 0 or max-width: unset

Implementation methods included:

  • Adding code to base.css/style.css files
  • Using the theme’s Custom CSS section in Theme Settings
  • Media queries for mobile responsiveness

Resolution:
The issue was successfully resolved. The store owner confirmed one of the provided CSS solutions worked perfectly.

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

How Can I move my brand logo more to the right? I want the boarder between background photos to fall just in the middle of the two “L” letters.

How can I move the text at the footer more to the left? I want it to sit at the edge with just alittle space between the left side of the page and the text.

Theme: Origin

URL: billon.maison

Screenshot 2025-01-14 at 9.52.16 AM.png
Screenshot 2025-01-14 at 9.52.16 AM.png2994×1858 963 KB

1 Like
2

Can you please mark on the screenshot where you want to place the logo and the footer content. Thank we will able to help you.

3

Hey @MaisonBillonDon ,

You can add this CSS in your base.css file, and increase/ decrease the value to decide the position for your logo and footer:

To reposition the logo →

.header__heading-link {
padding-left: 10px !important;
}

To reposition the footer:

.footer__content-bottom-wrapper {
margin-left: 0px !important;
}

This should work :slightly_smiling_face:

Cheers!
Shreya | Revize

4

Hi @MaisonBillonDon

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
@media only screen and (max-width: 749px){
h1.header__heading {
    margin-left: 20px;
}

.footer__content-bottom-wrapper.page-width {
    margin-left: 0 !important;
}
}

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

5

Hi @MaisonBillonDon ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

header.header h1.header__heading {
    padding-left: 16px !important;
}
.footer__content-bottom-wrapper.page-width {
    max-width: unset !important;
}

Here is the result:

DaisyVo_0-1736900176438.png
DaisyVo_0-1736900176438.png1353×416 587 KB

Please let me know if it works!

Best,

Daisy

6

This worked perfectly! Thank You