Solved

Issue with header logo position left on mobile - Dawn Theme

xnyjyh
Excursionist
141 0 6

I currently have my logo set to align left on mobile view and it is ONLY left on the home page. On ALL other pages it is centered, but yet I have it set for left for mobile logo positioning in the theme editor. I have a custom script, so maybe that is the problem? This is the script if you see any problems with it.

 

<script>
var headerHeading = document.querySelector('.header__heading-link');
headerHeading.style.opacity = '0';
headerHeading.style.display = 'none';

window.addEventListener('scroll', function() {
if (window.scrollY > 10) {
var sectionElement = document.querySelector('#shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4');
sectionElement.style.opacity = '0';
headerHeading.style.opacity = '1';
headerHeading.style.display = 'block';
} else {
var sectionElement = document.querySelector('#shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4');
sectionElement.style.opacity = '1';
headerHeading.style.opacity = '0';
headerHeading.style.display = 'none';
}
});
</script>

 


<style>
.header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 {
transition: opacity 0.5s ease;
}
.header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 {
transition: 0.5s ease;
</style>

Accepted Solution (1)
SomeUsernameHe
Shopify Partner
455 49 83

This is an accepted solution.

Use the following css:

a.header__heading-link.link.link--text.focus-inset {
width: 100%;
}

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

Replies 8 (8)

SomeUsernameHe
Shopify Partner
455 49 83

Where are you placing this CSS? It sounds like you might be placing it somewhere that is only added to the homepage instead of sitewide.

Sorry, I misunderstood the question the question a little. The code you placed doesn't show that it would adjust the logo positioning. 


This might be one of those things that might be more helpful if we see your site. Someone else might have run into this issue though. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
xnyjyh
Excursionist
141 0 6

There is no CSS for this. 

xnyjyh
Excursionist
141 0 6

You can have a look here: https://www.howahoriginals.com/

SomeUsernameHe
Shopify Partner
455 49 83

I checked on my phone and desktop in mobile view, and they both look good on all pages. When you scroll, the logo does indeed get moved to the left-hand side.

Either, I am misunderstanding the issue or it could be your browser or device. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
xnyjyh
Excursionist
141 0 6

not for me, testing on all browsers and both mobile and desktop. ONLY on home screen its left. on all others its tryign to go center but cant cause of icons, otherwise it would be centered. should be left with 15px padding-left.

not left.png

SomeUsernameHe
Shopify Partner
455 49 83

This is an accepted solution.

Use the following css:

a.header__heading-link.link.link--text.focus-inset {
width: 100%;
}

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
xnyjyh
Excursionist
141 0 6

Excellent. forgot i had width at 150% oops, but you fixed the issue! thanks 🙂

SomeUsernameHe
Shopify Partner
455 49 83

Haha awesome, I am glad I could help!

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee