How to center blog name and header

  • Author
    Posts
  • #1524454

    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.

    #1524542

    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

    .

    #1524692

    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/

    #1524693

    justpi
    Member
    .page .entry-header {
    text-align: center;
    }
    #1524694

    It didn’t work for me.

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

    #1524695

    justpi
    Member

    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;
    }

    #1524696

    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?

    #1524697

    justpi
    Member

    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;
    }

The topic ‘How to center blog name and header’ is closed to new replies.