How can I make my large logo appear bigger in the Studio Theme?

Store Design
1

Hi,

I have been struggling with my logo in the Studio Theme. I have a large logo, which I would love to have appear large on the theme if possible. The logo is 1000px and I was able to increase the maximum display for the logo up to 1000px but it still doesn’t appear as large as the logo itself is or as large as I would like it to be. Do I need to increase the header space somehow? Or how can I make my logo appear even larger than it does now?

The shop is: https://livewirerocknroll.com/

Any help is very appreciated :slightly_smiling_face: Thank you!

Christina

2

Hi @ChristiG

I would like to give you a solution to support you.

You can follow the below steps to make the logo larger:

  1. Go to Online Store → Theme → Edit code. https://prnt.sc/elKuwYWlBrEo

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file.

#shopify-section-header:not(.animate) .header{
 transition: 0.5s;
}
@media (min-width:490px) and (max-width: 700px){
  #shopify-section-header:not(.animate) .header{
    grid-template-columns: 1fr 4fr 1fr !important;
  }
}
@media (min-width: 700px){
  #shopify-section-header:not(.animate) .header{
    grid-template-columns: 1fr 14fr 1fr !important;
  }
}
@media (max-width:490px){
  #shopify-section-header:not(.animate) .header{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
        "left-icon icons"
        "heading heading";
  }
  #shopify-section-header:not(.animate) .header__heading-link{
     padding-top: 0 !important;
  }
}
  1. Save the file and double-check.

Best regards,
GemPages Support Team

3

Hi @ChristiG ,

Please go to Actions > Edit code > Sections > header.liquid file, find ‘header__heading’ and change code here:

Screenshot.png
Screenshot.png1374×748 42.8 KB

Code:

you can change the width here, it will display fine:

Screenshot.png
Screenshot.png1059×627 33.6 KB

Hope it helps!

4

Edit: Deleted

5

I really want to apologize for the delay in my response. I had been going through a serious illness in my family, but wanted to let you know that your solution worked perfectly and beautifully! Thank you so much for taking the time, it’s honestly life changing for those of us who are learning how to set up our Shopify shops! :slightly_smiling_face:

6

(I really want to apologize for the delay in my response. I had been going through a serious illness in my family) I don’t believe I have that section of code to change in the original coding for my shop, but still wanted to thank you very much for taking the time to help. It is super appreciated! :slightly_smiling_face:

7

Hi! I came across this post trying to make my logo larger as well. This code did not work for me, is the code website-specific? My site is https://masteryourbalance.com/ (password: masteradmin)