Logo on the header dawn theme as overlay instead of inline

[pthinagar]

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

[NerdCurator]

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

[BSSCommerce-B2B]

Hi @pthinagar,

You can try the following steps:

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

Step 2: Search for base.css

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:

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!

[BSSCommerce-B2B · Accepted solution]

Hi @pthinagar,

You can try the following steps:

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

Step 2: Search for base.css.

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:

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!

[pthinagar]

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

Cheers