Re: Default Page Title

Solved

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

Tiagiinho
Explorer
47 3 6

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

 

Tiagiinho_0-1664455308329.png

 

Accepted Solutions (2)

Sheesh_b
Shopify Partner
523 116 120

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

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

View solution in original post

Sheesh_b
Shopify Partner
523 116 120

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

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

View solution in original post

Replies 5 (5)

sirev
Shopify Partner
15 4 3

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
Explorer
47 3 6

Thanks for the quick answer. 

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

Sheesh_b
Shopify Partner
523 116 120

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

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Tiagiinho
Explorer
47 3 6

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
Shopify Partner
523 116 120

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

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION