How to make logo scale to fit properly on mobile? Dawn V11.

[daved1234]

How to make logo scale to fit properly on mobile? Dawn V11.

Kooks good on desktop but not mobile!

My site:
https://ec6bc3-2.myshopify.com/
PW
eawhup

[Artzen_tech · Accepted solution]

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file. 

@media (max-width: 767px){
	.header-wrapper header.header {
		padding-top: 20px;
	}
	h1.header__heading {
		margin-left: 0!important;
	}
	a.header__heading-link.link.link--text {
		margin-left: 0!important;
	}
	.header__inline-menu {
		top: -6px;
	}
}

    If this does not work try this also           

               OR

Paste this theme.liquid before </body> tag

<style>
@media (max-width: 767px){
	.header-wrapper header.header {
		padding-top: 20px;
	}
	h1.header__heading {
		margin-left: 0!important;
	}
	a.header__heading-link.link.link--text {
		margin-left: 0!important;
	}
	.header__inline-menu {
		top: -6px;
	}
}
</style>

your header look like that

[Artzen_tech]

Hello @daved1234 

Its Artzen Technologies! We will be happy to help you today.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

@media (max-width: 767px){
	.header-wrapper header.header {
		padding: 10px 20px;
	}
	.header__icon svg.icon.icon-hamburger {
		display: block !important;
	}
	h1.header__heading {
		margin-left: 0px !important;
	}
	nav.header__inline-menu {
		display: none !important;
	}
	.header__icons details-modal.header__search {
		display: block !important;
	}
}

Let me know if need further assistance
Regards,
Artzen Technologies

[daved1234]

Hello!

Thank you for your support! Unfortunately, that didn't work. I pasted the code to the bottom of the base.css. It also add a hamburger menu which I do not want.

[Artzen_tech · Accepted solution]

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file. 

@media (max-width: 767px){
	.header-wrapper header.header {
		padding-top: 20px;
	}
	h1.header__heading {
		margin-left: 0!important;
	}
	a.header__heading-link.link.link--text {
		margin-left: 0!important;
	}
	.header__inline-menu {
		top: -6px;
	}
}

    If this does not work try this also           

               OR

Paste this theme.liquid before </body> tag

<style>
@media (max-width: 767px){
	.header-wrapper header.header {
		padding-top: 20px;
	}
	h1.header__heading {
		margin-left: 0!important;
	}
	a.header__heading-link.link.link--text {
		margin-left: 0!important;
	}
	.header__inline-menu {
		top: -6px;
	}
}
</style>

your header look like that

[daved1234 · Accepted solution]

Thank you! That worked!

[Artzen_tech]

Please accept my solution not your reply