How can I adjust the size of a text logo on mobile and desktop sites?

[RLopez]

Hi there! We currently do not have a specific logo uploaded as we like the text-only option provided by Shopify. However, we are looking for help in adjusting the logo separately for both the mobile and desktop-specific sites. In the images, we have included simple guidelines for what we were hoping for. When we adjusted the Desktop Logo Width and Mobile Logo Width sliders for the logo, all that changed is the distance of the Menu Options away from the center rather than the actual size of the text. Any direction would be greatly appreciated.

Link: www.cocoandcobakery.com

Theme: New

We would like the Text to fill that circle without increasing the distance of the Home, Shop, News, etc. tabs any further.

If the Coco & Co. could be in a straight line.

[voxfa]

Hey there,

You can achieve this by adding the following CSS code:

.site-header__logo{
font-size: 40px  !important;
width: 225px !important;
}

You can read the following article to learn how to add custom CSS to Shopify.

Thank you

[PageFly-Richard]

Hi @RLopez , This is Richard from PageFly - Landing page builder.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

I hope it would help you Best regards,

Richard | PageFly

[irene-vintage]

Hello @RLopez ,

To adjust the size of the text-only logo separately for both the mobile and desktop versions, you can try to follow these steps:

• Go to Online Store → Themes → Actions → Edit code
• Go to Assets folder → base.css file → add the following CSS code to adjust the size of the logo for desktop:

.site-header__logo-link {
  font-size: 48px;
  line-height: 48px;
}

• Add the following CSS code to adjust the size of the logo for mobile:

@media (max-width: 767px) {
  .site-header__logo-link {
    font-size: 32px;
    line-height: 32px;
  }
}

You can change the font size and line height as needed

• Save and preview

Hope this can help you out. Let us know if you need any further support.

Ali Reviews team.

[INA_MSWEB]

Hi @RLopez

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:
.site-header__logo {border: 1px solid #000; border-radius: 48px; padding: 20px;}

Regards,

San

[oscprofessional]

Hello @RLopez

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

@media only screen and (max-width: 768px) {
.site-header__logo {
    margin: 32px 0;
    font-size 32px !important;
    width: 225px !important;
}
}