How to change the size of your logo

It's important to remember that your logo is based around the height of your header area minus some spacing that we add. You can edit both the header height and the spacing by following the below steps.

Step 1

Open your website folder in your preferred editor. We would recommend Visual Studio Code.

Below you can choose to follow both Step 2 and Step 3 or only follow one. By combining or not you will change the height of your logo.

Step 2 — Increase header size

Go to ~/less/THEME NAME/usn-global.less and locate the following code:

@small-header: 60px;
@large-header: 90px;

You can change one or both of these sizes to change the height of the header on a particular breakpoint. This will increase the logo size.

Step 3 — Adjust spacing around the logo

Go to ~/less/THEME NAME/usn-layouts/usn-header.less and locate the following code:

header#site-header #logo {
    position: relative; top: 0;
    padding: 5px 15px;
    height: @small-header;
}

You should edit the padding on above. This will change the spacing around your logo. Depending on your theme, you will need to edit this in two places within that file, for both breakpoints.

Step 1

Open your website folder in your preferred editor. We would recommend Visual Studio Code.

Step 2

Locate the file /config/usntheme.config'.

Step 3

Locate the line that is relevant to the theme you are using. Edit the height of smallLogoHeight and largeLogoHeight to suit your needs.

<add name="THEME_NAME" smallLogoHeight="60" largeLogoHeight="80" version="1.0" />

Step 4

Save the file and view the change on your website.

Additional steps

You can go further by adjusting the spacing around your logo by editing the LESS file associated with your theme. 

Step a

Go to the file: ~/less/THEME NAME/usn-layouts/usn-header.less

Step b

header#site-header #logo {
    padding: 20px 15px;
    width: ~"calc(@{small-logo-width} + 30px)";
    height: ~"calc(@{small-logo-height} + 40px)";
}

Depending on the theme, the above code will be slightly different. You may also need to edit the spacing for both the small and large breakpoints.

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Site Builder for Umbraco to deliver results.

NEW Site Builder!

We have launched a brand new, game-changing product for Umbraco CMS.