Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello @Sheesh_b ,
Could you help me, I would like for all the default page I create that the Title is always centered.
As for example I created a default page for a "contact page" and as you can see title is not centered.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi @Tiagiinho
Add below CSS and it'll solve your issue. This css will work for all future and current pages.
.page-width.page-width--narrow {
text-align: center;
}
Thanks
This is an accepted solution.
Hi @Tiagiinho
The changes you did working perfectly, but I have theme oriented change which you can follow if you want.
First go to header.liquid file and comment out the code as below at line number 674
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
/*
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}
*/
Then, add below css in base.css at bottom
#shopify-section-header {
z-index: 20;
position: sticky;
top: 0;
}
This quick solution will work using theme existing code change with minimum effort and with some theme animation.
Thanks
Just add
style="text-align: center;"
to your h1 tag, for e.g. :
<h1 class="main-page-title page-title" style="text-align: center;">Contact Us</h1>
Thanks for the quick answer.
And where do I find the tag where I have to add this code ?
This is an accepted solution.
Hi @Tiagiinho
Add below CSS and it'll solve your issue. This css will work for all future and current pages.
.page-width.page-width--narrow {
text-align: center;
}
Thanks
Thanks a lot !
I have another question ;
About sticky header I pasted this code in base.css
.shopify-section-header-hidden {
transform: translateY(0%) !important;
}
.shopify-section-header-sticky {
position: fixed !important;
width: 100%;
}
The problem is when you scroll down you can see that the header disappear to bump back and stick.
But the animation make it not very smooth.
Thanks again
This is an accepted solution.
Hi @Tiagiinho
The changes you did working perfectly, but I have theme oriented change which you can follow if you want.
First go to header.liquid file and comment out the code as below at line number 674
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
/*
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}
*/
Then, add below css in base.css at bottom
#shopify-section-header {
z-index: 20;
position: sticky;
top: 0;
}
This quick solution will work using theme existing code change with minimum effort and with some theme animation.
Thanks
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025