How To Centre The Header Logo, Site Title & Description In Twenty Seventeen

February 22, 2017

The site branding elements in the header of Twenty Seventeen are left aligned. The logo, site title & description can be centred within the header.

The default header logo, site title & description.

The header logo, site title & description centred within the header.

Where and how to center the logo, site title & decription:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

The CSS code:

#masthead .wrap {
    /* position: relative; */
	text-align: center;


Share this:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

Share your thoughts

Your email address will not be published. Required fields are marked

  1. Hi Bharat,
    How can we change the logo URL in twenty seventeen ?

    Actually, the logo redirects to home page.
    In fact, I would like to use the logo as a button that sends to a register page from anywhere in the site.

    1. Nazim,
      First create a child theme as per here:

      Then copy the file from parent theme at /twentyseventeen/template-parts/header/site-branding.php

      In the file find the sections:

      <?php if ( is_front_page() ) : ?>
      <h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
      <?php else : ?>
      <p class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></p>
      <?php endif; ?>

      Change the a href links between the double quotes to where you want the links to go to.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra