How to Centre Justify H1 Titles in Neve?

I also tried adding a space between wrap and .nv- but it still didn’t do the trick.

Hello @1waytoheaven,

To align all your h1 elements to the center, please try adding the following code into Customizer -> Additional CSS:

h1 {
    
    text-align: center !important;
}

Please let us know if it worked and if you have any more questions.

Thank you, I placed the code in “Additional CSS” in the Neve theme, flushed the browser, and the site’s LiteSpeed cache (Purge All), and refreshed the page, but the heading is still left justified. It is the same on the; Homepage, article Posts, and the Pages in the Main menu.

I don’t understand why this isn’t working.

In Developer Tools I see the CSS code for this Post Title, for example, as follows:

<div class="entry-header"><div class="nv-title-meta-wrap"><h1 class="title entry-title ">Quick Prayer Keys</h1></div>

But even with your suggested “Additional CSS”, I see no change on the live post.

I am using Neve with the Neve Child theme.

Hi @1waytoheaven,

Please try this CSS – it should work:

h1.title.entry-title {
    text-align: center;
}

Let us know if this doesn’t work either ??

Thank you Vytis, I thought I’d been forgotten.

I removed the previous h1 additional css code, and inserted your suggestion instead;

h1.title.entry-title {
    text-align: center;
}

Purged all LiteSpeed caches, and browser caches, but the Heading is still left justified, on the homepage and on the article pages.

No idea why these changes don’t have any effect.

Hi @1waytoheaven,

It could be some syntax error in your Additional CSS section where all the CSS codes are added so try to find that error as it might be breaking everything that’s below the error (or just try to put the code at the very top of the field of Additional CSS).

Here is proof that the provided code works when it’s added correctly – https://vertis.d.pr/IAgZ3y

Thank you Vytis, well done for taking the trouble to investigate, and illustrate your code works ??

The screen shot you provided, is of an inner article page, not from the Homepage.

I confirm that your code does now work on the article pages (after I placed it at the top of the “Additional CSS”) but the same h1 Title is still left justified on the homepage.

I moved your code to the top of the “Additional CSS”, purged all LiteSpeed caches, and my browser cache, and though the h1 header is now centre justified on the article pages inside, h1 titles on the homepage are still left justified.

(Homepage is the front page of the site, I think Neve calls it the “Blog”.)

https://www.born-again-christian.org/news/

The only code I have in Additional CSS is as follows;

h1.title.entry-title {
    text-align: center;
}
@media only screen and (max-width: 480px){

.is-menu-wrapper {
   display: none !important;
}
	
}
@media only screen and (min-width: 481px) and (max-width: 910px){
	
.is-menu-wrapper {
   display: none !important;
}

I don’t see any syntax errors there… can you Sir?

I’d like to get the Header titles centre justified on the Homepage as well.

Thank you helping me make progress!

PS. The CSS code after the h1 code was needed to stop a search box appearing and obscuring the Hamburger icon on mobile size screens. So I still need it in there.

Hi,

If you would like this element: https://prnt.sc/115u7u6 center aligned, please try adding this code into Customizer -> Additional CSS:

.layout-grid .content>.blog-entry-title {
   text-align: center !important;
}

Best regards.

Bingo!

That got it ??

Now centre justified h1 titles on the Hoempage, and on article inner posts.

Many thanks for your diligence and patience with me.

Resolved.

Hi @1waytoheaven,

I am glad I was able to help!

Please let us know if you have any more questions by opening a new ticket.

Thank you for your help.

The key change that made it work, was simply lifting the css code to the top of the “Additional CSS” code blocks.

So the order of blocks of code in Customizer > Additional CSS is significant.

The h1 tile is now center justified on Posts, but…

I notice that on Pages the h1 Title is still left justified instead of center justified.

So I looked in browser Developer tools and Web Inspector and fished out this code to try, but it didn’t work, can you refine it for me please?

h1.page.title {
    text-align: center;
}

Here’s a sample Page for you to inspect:

https://www.born-again-christian.org/news/lifelines-devotional/

Hi @1waytoheaven,

Please try adding the following:

For center-aligning ‘Lifelines: Facts of Life’:

.nv-page-title-wrap.nv-big-title .nv-page-title h1 {
    text-align: center !important;
}

For center-aligning ‘When God Speaks’ and ‘Almighty God has Spoken’:

 .h3 {
    text-align: center !important;
}

Please let us know if this worked well. Thanks!

Yes, I confirm the h1 code works as required ?? Many thanks.

I didn’t use the .h3 code, because I can control that parameter within WP editor, it’s just the H1 Titles on posts and pages that Neve controls that needed this tweak.

So, to hopefully close-off this thread, and help others who may be needing to centre justify their site titles, this is the “Additional CSS” code I now have in my Neve theme Customiser.
(Note: I discovered the order of the lines is important to make it function properly.)

h1.title.entry-title {
    text-align: center;
}

.layout-grid .content>.blog-entry-title {
   text-align: center !important;
}

.nv-page-title-wrap.nv-big-title .nv-page-title h1 {
    text-align: center !important;
}

I’m happy I was able to help!

Please let us know if you have any more questions.