How to Modify Modern Hub Site Logo Size

This article will show you how to resize the logo in the Hub navigation of the Modern Hub Site using the Custom CSS feature of ShortPoint Theme Builder.

Before	After

If you would like to apply this solution, please follow the steps in this support article.

TABLE OF CONTENTS

• Before we begin
• Step 1. Prepare the Custom CSS solution
• Step 2. Navigate to Custom CSS from the ShortPoint Theme Builder
• Step 3. Apply Custom CSS
• Result

Before we begin

• Make sure ShortPoint is installed on your SharePoint site(s). We recommend always having the latest version. Visit our Download ShortPoint page and get the latest version of ShortPoint.
• You are a ShortPoint user with an active license.

Step 1. Prepare the Custom CSS solution

Please copy the following code, keeping in mind that the value in pixels indicates the actual height of the logo. For the purpose of this article, we have used 55px. Feel free to indicate the pixel value that's perfect for you.

.ms-HubNav-logo {
height: 55px
}

Step 2. Navigate to Custom CSS from the ShortPoint Theme Builder

Open the ShortPoint Theme Builder (Site contents / Site settings > ShortPoint Dashboard > Theme Builder).  

In the Theme Builder menu, navigate to Utilities.

And then select Custom CSS.

Step 3. Apply Custom CSS

Paste the copied CSS code from step 1 to the Custom CSS field:

Now click Apply (1) and then Publish (2) to save your changes:

Result

That's it! Your Hub Site Logo will now have your preferred size on the site pages.

Related articles:

• Apply Custom CSS from ShortPoint Theme Builder : ShortPoint Support
• Exercise 1: Open Theme Builder : ShortPoint Support 
• Exercise 2: Hide Elements : ShortPoint Support 
• Are there any differences between ShortPoint Modern Theme Builder for Hub sites or Associated Site Collections? : ShortPoint Support