distill enlarge navbar logo

[shannon.pileggi]

Is there a way to enlarge a navbar logo on a distill site? Could I do so through modifications to the theme.css?

I have a logo image that is appropriately cropped, but looks very small in the navbar. It appears to be squeezing into the same height as the text height, and I was wondering if it could go larger.

Many thanks!

[EllaKaye]

Hi Shannon. This worked for me, in my theme.css:

.distill-site-header .logo img {
   max-height: 60px;
   width: auto;
   margin-top: 10px;
}

[shannon.pileggi]

Thank you for contributing this solution! This worked perfectly for the logo!

However, with the englargement of the navbar, the vertical text alignment is off between the title on the left hand side and the navbar items on the right hand side. Do you know of any solutions to make the title have the same vertical alignment as the nav bar items on the right side?

Thank you!

[shannon.pileggi]

On Twitter, @RCoderWeb provided a reproducible distill site with custom theme css:

https://github.com/R-CoderDotCom/distill_increase_logo

A comment on this example was:

Hi! I've created a reproducible example but the positioning depends on the image size, that's why you couldn't center the elements properly. You will need to fine-tune transform: translateY(-70%); and top: 25%; on the example.

Here is the example css provided in the repo:

/*-- Additional custom styles --*/
/* Add any additional CSS rules below                      */


.distill-site-header .logo img {
    display: inline-block;
    width: 100px;
    height: 100px;
    max-height: 100px;
}

.distill-site-header {
    height: 100px;
}


.distill-site-header .title {
position: relative;
transform: translateY(-70%);
}

.distill-site-header .nav-right {
    top: 25%;
    position: relative;
}

d-title{
  margin-top: 50px;
}

This did work for me, with the experimental tweaking as suggested.