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

Posted on 22 February 2017 in Twenty Seventeen Theme Customisation
Comments: 5

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:


Leave a Reply

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"}
Do NOT follow this link or you will be banned from the site!