How to change the logo size in Docusaurus?

Question

How to change the logo height on docusaurus? I've tried various things but no luck

Changing the css to navbar__brand and set the height on the image it self

Answer 1

In the docusaurus.config.js file, locate the navbar section. There should be a logo field that specifies the logo image file.

Add a height field to the logo object and set it to the desired height of the logo, in pixels.

module.exports = {
  navbar: {
    logo: {
      src: '/img/logo.png',
      height: 40,
    },
    // ...
  },
  // ...
};

Try this out, It should work

Answer 2

I have been struggling with the same issue. Here's what seems to work for me.

In your src/css/custom.css file:

.navbar__logo img {
  height: 160%;
  margin-top: -10px;
}

I also set the navbar-height as I wanted it a little bigger. This is in the same src/css/custom.css file.

:root {
  ...
  --ifm-navbar-height: 80px;
}

You can play around with the height and/or margin-top and it should work. Seems ok for scaling with the page as well.

There may be a better way, but was not able to find it documented. Setting the height/width in the navbar.logo object of docusaurus.config.json did not work, or messed up the image scaling.