Changing Site Logo/Top bar size

  • Unknown's avatar
    guardr1 · Member ·

    Here’s the site I’m working on. It’s using the Blank Canvas theme.

    I’m trying to change the size of both the site logo and top navigation bar. I’m also trying to change the font of the navigation bar, but one thing at a time.

    I tried this code to change the site logo size, but it didn’t seem to change anything. I added it to the additional CSS portion in Customize.

    .img.custom-logo img { 
  max-height: 200px !important;
}

    Any help would be much appreciated. First time trying this so there’s a chance I just added the code to the wrong place or missed something too.

  • staff-totoro · Staff ·

    Hi there,

    If you try the following CSS does it enlarge your logo?

    `
    .site-logo .custom-logo {
    max-width: 240px !important;
    max-height: 240px !important;
    }
    `

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar
    guardr1 · Member ·

    I tried that code and it worked slightly. I was able to make the logo bigger, but anything higher than ~240ish pixels and it stopped working. Couldn’t make it any bigger than that.

    It’s also slightly blurry. I’m choosing an image thats 1920×1080 but it still doesn’t seem full resolution.

  • aleone89 · Staff ·

    Hey there,

    Instead of the code in use, please try the following: 

    
.site-logo .custom-logo {
    height: initial;
    width: 100%;
    max-height: initial;
    max-width: 50%;
}

    You would change the max-width to a percentage that suits your needs. Using percentages will also help to keep the logo responsive on different screen sizes.

    I hope this helps.

  • Unknown's avatar
    guardr1 · Member ·

    This worked!

    I was able to change the image size to exactly what I wanted. Thank you!

    Is there anything similar for changing the size of the top menu bar? I’m trying to switch that font to Arial Black and increase the size.

  • Unknown's avatar
    guardr1 · Member ·

    figured it out, all solved. appreciate all the help

  • The topic ‘Changing Site Logo/Top bar size’ is closed to new replies.