Solved

Logo on the header dawn theme as overlay instead of inline

pthinagar
Visitor
2 0 0

I am trying to have the logo appear slightly larger than the header and overlaying on the header banner. I am using the Dawn theme. How can i do this

 

pthinagar_0-1714875665214.png

 

Accepted Solution (1)

BSSCommerce-B2B
Shopify Expert
355 59 67

This is an accepted solution.

Hi @pthinagar,

You can try the following steps:

 

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

 

view.png

 

Step 2: Search for base.css.

 

view.png

 

Step 3: Add this code at the end of the file.

  sticky-header > header > h1.header__heading{
    width: 220px
  }
  sticky-header > header > h1 > a {
    position: absolute;
    transform: scale(2);
    top: 24px;
    left: 122px;
  }

 

You will get the result like this:

 

view.png

But replace your image with a higher resolution one because when you scale it up, it will be blurry

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 4 (4)

NerdCurator
Shopify Partner
392 72 107

@pthinagar  Can you please provide the URL of your store and if it is password protected please share the password too. Thanks

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com

BSSCommerce-B2B
Shopify Expert
355 59 67

Hi @pthinagar,

You can try the following steps:

 

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

 

view.png

 

Step 2: Search for base.css

 

view.png

 

Step 3: Add this code at the end of the file

  sticky-header > header > h1.header__heading{
    width: 220px
  }
  sticky-header > header > h1 > a {
    position: absolute;
    transform: scale(2);
    top: 24px;
    left: 122px;
  }

 

You will get the result like this:

 

view.png

But replace your image with a higher resolution one because when you scale it up, it will be blurry

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSSCommerce-B2B
Shopify Expert
355 59 67

This is an accepted solution.

Hi @pthinagar,

You can try the following steps:

 

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

 

view.png

 

Step 2: Search for base.css.

 

view.png

 

Step 3: Add this code at the end of the file.

  sticky-header > header > h1.header__heading{
    width: 220px
  }
  sticky-header > header > h1 > a {
    position: absolute;
    transform: scale(2);
    top: 24px;
    left: 122px;
  }

 

You will get the result like this:

 

view.png

But replace your image with a higher resolution one because when you scale it up, it will be blurry

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

pthinagar
Visitor
2 0 0

Thank you so much for this solution. It worked perfectly for me. 

Cheers