Need help? Check out our Support site, then


How to center blog name and header

  1. I just recently purchase custom design for my blog but I'm trying to center my blog title and header as it looks very to the left as you scroll down and would prefer it center. cheers.

    The blog I need help with is roisinflanagan.com.

  2. Hi, add the following to your custom CSS at Appearance > Customize > CSS to center the title and tagline.

    .site-header h1, .site-header h2 {
        text-align: center;
    }

    The header image is actually centered, but your latest posts make it look like it isn't because they don't have enough text to reach the right side of the content area. If you look at the Tommy Hilfiger post, you will see that the header is centered

    .

  3. Thank you so much!!! I did like you said and it worked.

    One more question: How do I get the page headings to center??

    http://roisinflanagan.com/

  4. .page .entry-header {
    text-align: center;
    }
  5. It didn't work for me.

    Do I put it directly under the HTML coding for centering the header?

  6. If you click About, Contact etc you'll see that the page titles are now centered.
    I guess I misunderstood: your question probably meant how to center the top menu rather than the page titles. If so, remove my previous suggestion and paste this instead:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    text-align: center;
    }
  7. EXCELLENT!
    This worked!
    Ok, I know I'm annoying you but just another thing!

    The title of my blog and the title of my posts are all the same font and size. I want my title to be a bigger size and font and the blog post titles to be smaller in size. Is there a way so that I can do this? Or do they both have to be the same size and font?

  8. You can add these and change the values, to adjust the font sizes of blog title / tagline / post titles:

    .site-header h1 {
    font-size: 42px !important;
    }
    .site-header h2 {
    font-size: 13px;
    }
    .entry-header .entry-title {
    font-size: 35px !important;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic