How can I enlarge and overhang the logo in Dawn theme?

[gmariem93]

Hi, I am moving my store over to Shopify and was trying to replicate my current store. How can I enlarge the logo without it being blurry and make it overhang the menu header? I am using the Dawn theme. Thanks in advance!

[PMike]

Hi there,

When enlarging your logo on the Dawn theme in Shopify, it's important to maintain the image quality to avoid blurriness. To achieve this, follow these steps:

1. Prepare a high-resolution version of your logo: Ensure that you have an image file of your logo in a larger size, preferably in a vector format such as SVG or a high-resolution PNG file.

2. Access your Shopify admin: Log in to your Shopify account and go to the "Online Store" section.

3. Customize your theme: Under the "Online Store," click on "Themes." Locate the Dawn theme and click on "Customize" to access the theme editor.

4. Adjust the logo size: In the theme editor, look for the "Header" or "Logo" section. Here, you can typically find options to adjust the logo size or upload a new logo. Use the available options to increase the logo size as desired.

5. Maintain image quality: When uploading the larger logo file, make sure it is properly scaled to fit the increased size without stretching or distorting the image. This will help maintain the image quality and prevent blurriness.

6. Overhang the menu header: To make the logo overhang the menu header, you may need to apply custom CSS code. In the theme editor, look for the "Edit CSS" or "Additional CSS" section. Add the following CSS code:

```css
.site-header__logo img {
width: [desired width]px;
height: auto;
margin-top: -[desired amount]px;
}
```

Replace `[desired width]` with the width you want for your logo (in pixels) and `[desired amount]` with the amount you want the logo to overhang (in pixels). Adjust these values as needed to achieve the desired effect.

Remember to save your changes and preview your store to see how the logo appears. If necessary, make further adjustments to ensure the desired look and feel.

[gmariem93]

Thank you for your advice, but I ran into a few problems when trying the method above.

When I try to upload the high resolution PNG or SVG it says I can only upload a max of 20MP which my current logo already is, but it is blurry when I increase its size. 

I also tried to add the code to the custom css area when I click on the header and changed the px like you suggested, but it doesn't work- nothing happens. The image below is what I am trying to accomplish. Thanks in advanced!