How can we help you today?

How to Center the Header Logo in SharePoint Modern Experience

By default, the header logo in Modern SharePoint experience is displayed on the left side of the header and there is no option to move it to a different position. However, with a few lines of CSS and ShortPoint Theme Builder, the logo can be centered.


Before:


After:


TABLE OF CONTENTS


Solution

Please follow the steps below.


Step 1. Navigate to the Custom CSS option in the Theme Builder

Open ShortPoint Theme Builder (Site Contents > ShortPoint Dashboard > ShortPoint Theme Builder and click Customize my site).

 

Then, navigate to Utilities > Custom CSS:



Step 2. Copy the custom CSS code

Here is the custom CSS code we will be using for centering the logo. Please choose the one according to your environment, and copy it to the clipboard.


  • Office 365:

[class*=logoCell] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

  • SharePoint 2019:

[class*=ms-siteHeader-siteLogo] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Step 3. Update your customizations with the copied code

Paste the code from the Step 2 in the Custom CSS text area, and click Apply:



After you clicked Apply, the logo should now be displayed in the center of the page. 


If you are happy with the results, click Publish.


That's it. Happy centering!


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 10 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more