Introduction

If you're with us for a while, you probably know that quite some time ago we released our article on How to Change to Logo Size in Classic Pages. Time has come to take care of it in Modern Pages, too.


In this tutorial, let's see how we can make the SharePoint Modern site logo bigger (or smaller, if you wish).



Before we start

  • This tutorial is for SharePoint Modern Experience.
  • You need to have ShortPoint SPFx installed.
  • You should have a custom logo image uploaded to Site Settings > Title, description and logo. This tutorial does not work with the default modern pages logo.



Step 1: Open the Custom CSS utility in the Theme Builder


Go to Site Contents > ShortPoint Dashboard > Theme Builder > Modern.

Inside the Theme Builder, open Utilities > Custom CSS.


Step 2: Insert custom CSS code

Here is the code you will use for modifying the logo size: 

[class^="logoImg-"] {
    max-height: 300px;
    max-width: 200px;
}

Make sure you indicate the values in px that you want (smaller or greater). Click the Apply button in the Theme Builder to preview changes a couple of times before you are happy with the result.


Step 3 (optional): Modify the header width


If you feel like the header is too small to fit a bigger logo, you can use this code (put it right below the first code block): 

[class*="mainHeader-"] {
    height: auto;
    padding: 15px 32px;
}

The "auto" height will fit the header height to the logo height. If you want something else, indicate a custom value.

The paddings can be also modified or completely deleted (if you prefer not to have them).


That's it! Hope you enjoyed this tutorial.


Related articles: