How to resize header logo in Dawn theme after code edits?

[MPEK]

I am having trouble resizing my header logo in the Shopify - Dawn theme (ver. 7.0.1) after editing some codes that brought the social media icons from the Footer to the Header.  Prior to the edit, the logo displayed perfectly.  But after the edit in which I simply just replaced codes that I found from here, https://community.shopify.com/c/technical-q-a/the-dawn-theme-how-to-add-social-media-icons-to-the-he..., the size of the logo for both Desktop and Mobile all changed to just one universal size, no matter how much I adjusted the custom logo width.  Please help, thank you!

mypekicks.store

password: mypekicks

[KetanKumar]

@MPEK 

oh sorry for that issue can you please  try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.header__heading-logo {max-width: 100px;}

[BSS-Commerce]

Hi @MPEK ,

You can add the CSS at the end of assets/base.css . file

.header__heading {
   width: 160px !important;
}

//màn hình điện thoại
@media only screen and (max-width: 768px) { 

.header__heading {
   width: 160px !important;
}

}

Let me know if it works for you.

[MPEK]

Only the Home Page works, but not the rest of the pages when I go into either Products or any other pages...

[MPEK]

Actually, only the Home page works, the rest of the pages still have the enlarged icon.  How do I ensure that all of the pages in the website have the small icon?

[Litos · Accepted solution]

Hi @MPEK,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: 1fr auto 1fr !important;
  }
}
@media screen and (max-width: 989px) {
  .header--mobile-left {
    grid-template-columns: auto 1fr 1fr !important;
  }
}

Hope it helps!

[MPEK]

This works great, now every page has the correct logo size, thank you Litos!