Search code examples
customizationdocusaurus

How to change the logo size in Docusaurus?

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

Solution

  • 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.