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

 

Share this:

Comments

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

  1. Bharat Karavadra avatar

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

  2. Nazim avatar
    Nazim

    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. Bharat Karavadra avatar

      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.

  3. thenot edouard avatar

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

    1. Bharat Karavadra avatar

      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.

      1. Steve avatar

        Hi.
        Thanks for the mentioned css :)

        Do you know how to raise or lower the logo & identity?

        All the best, Steve

Leave a Reply

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

>