How can I center the title on my default contact page?

[Tiagiinho]

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

www.spoown.com

[Sheesh_b · 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

[sirev]

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>

[Tiagiinho]

Thanks for the quick answer. 

And where do I find the tag where I have to add this code ?

[Sheesh_b · 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

[Tiagiinho]

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 

[Sheesh_b · 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