How To Change The Logo Size (Increase & Decrease) In Twenty Seventeen

The logo in Twenty Seventeen is a fixed size, and it’s width, and height, can be increased or decreased in size.

The default logo size.

The logo re-sized.

In this example, the logo has been doubled in size, however, it can also be reduced in size.

Where and how to make the width of the menu full screen:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

  • The 700px max-width is to double the default width of 350px. To halve the size, change the value to 125px
  • The 160px max–height is to double the default height of 80px. To halve the size, change the value to 40px.

The CSS code:

@media screen and (min-width: 48em) {
	.custom-logo-link img {
		max-width: 700px;
	}
}

.custom-logo-link img {
    /* display: inline-block; */
    max-height: 160px;
    /* width: auto; */
}

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.


Posted

in

by


Comments

15 responses to “How To Change The Logo Size (Increase & Decrease) In Twenty Seventeen”

  1. Julia avatar
    Julia

    Wow. That was so easy!! Thank you!!

    1. Bharat Karavadra avatar

      I’m glad it worked for you.

  2. James avatar
    James

    Sorry to ask something so obvious, but my Twenty Seventeen does not have a “Appearance > Edit CSS” menu option. I can select Appearance > Editor, and then there are multiple files to edit. Should this been done in “style.css” or should I be editing “header.php”? Also, where specifically in the css document should the above code be placed? Thanks in advance for your assistance.

    1. Bharat Karavadra avatar

      James,
      I have logged into a few installations of other people and recall the name being different. It may be a language setting matter, however try Appearance > Customise > Additional CSS.
      Paste the CSS code into that, not into the files.

      1. James avatar
        James

        Thanks!!

  3. Uri avatar
    Uri

    Hye. How can I manage two different sizes: 1 for the Home Page, and another for other pages?

    1. Bharat Karavadra avatar

      Uri,
      Try putting .page-id-XX of your home page before each style for the home page, and also use the same code as above for the other pages:

      First, get your .page-id-XX from the body tag of your home page (e.g. .page-id-86 )

      Then put that at the beginning of each CSS code block like this:

      @media screen and (min-width: 48em) {
      .page-id-86 .custom-logo-link img {
      max-width: 700px;
      }
      }

      .page-id-86 .custom-logo-link img {
      /* display: inline-block; */
      max-height: 160px;
      /* width: auto; */
      }

      Change the width and height for the home page logo.

      Then copy the two styles, as in the post above and without .page-id-XX, for all the other posts and pages.

  4. Daffy avatar
    Daffy

    When Uploading a Logo 2017 theme will Crop the image to a much smaller size, so when this is implemented the image becomes blury

    1. Bharat Karavadra avatar

      Daffy,
      When I select an image from Media that is 1920 x 1080 pixels, for the logo, a square is selected in the middle of the image at full height.
      I then change the selection to use the whole width of the image and even though the image appears smaller as the logo on the header, it is clear.
      Can you make sure you are using a high enough resolution image for the logo and then select the whole image?

  5. Mitch avatar
    Mitch

    Hi Bharat,
    I’ve had someone help me on a slider customization for the homepage and they created a child theme so the changes don’t get overwritten. Do I need to do the same with the logo size customization? I’m assuming in your example here, I’m just making changes to the regular or parent theme CSS, correct? Also, I hope I’m using the right definitions. Thanks for your patience with my lack of knowledge here.

    1. Bharat Karavadra avatar

      Mitch,
      Follow the instructions above and enter the CSS in WordPress Admin > Appearance > Edit CSS, and the code should work with the child theme.

  6. bonsai698 avatar

    Hi Bharat,
    is there a way to increase the logo size even more then in your example?

    1. Bharat Karavadra avatar

      Hello, to increase the logo size more than in the example below, then simply multiple the 700px and 160px by how much you want to increase the size by. So, if you want to make it 1.25 times bigger than it appears with the code above use 875px and 188px instead and save the updates in the CSS Editor.

Leave a Reply to Bharat Karavadra Cancel reply

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

>