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

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

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.

Posted

February 22, 2017

Blog Posts

Bharat Karavadra

Tags:

twentyseventeen, wordpress

Comments

6 responses to “How To Centre The Header Logo, Site Title & Description In Twenty Seventeen”

Bharat Karavadra

October 23, 2017

I just updated the reply above so that the code appears correctly.

Reply
Nazim

October 23, 2017

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.

Reply
1. Bharat Karavadra
  
  October 23, 2017
  
  Nazim,
  First create a child theme as per here: https://codex.wordpress.org/Child_Themes
  
  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.
  
  Reply
thenot edouard

February 27, 2017

Hello, ty for your tips, it is center my tittle and description but not my logo….
Best regards

Reply
1. Bharat Karavadra
  
  February 27, 2017
  
  Hello Ed, I believe it is,
  Can you send me your admin URL, login and password using the ‘Ask for help’ link on the top menu. I can then look into it.
  
  Reply
  1. Steve
    
    February 27, 2021
    
    Hi.
    Thanks for the mentioned css :)
    
    Do you know how to raise or lower the logo & identity?
    
    All the best, Steve
    
    Reply