How to control the size of the sidebar logo?

[dervinism]

Is there a way to control the size of the sidebar logo?

[choldgraf]

Your easiest bet is to use your own CSS rules to style the logo however you'd like. The HTML structure of the logo image is roughly:

<a class="navbar-brand logo">
    <img>
    <p></p>
</a>

So you could control the logo width with a CSS selector like:

a.navbar-brand img {
    width: 50px;
}

[dervinism]

Do you have an example? Would you specify the html bit in the _config.yml file?

html:
  logo:
    <a class="navbar-brand logo">
      <img>
      <p></p>
    </a>

[choldgraf]

I would follow the instructions in the "Custom CSS" section here: https://jupyterbook.org/en/stable/advanced/html.html#custom-css-or-javascript

And then create a CSS rule that matches the HTML structure of the logo (which is what I've linked above).

I'd also recommend checking out an "Introduction to CSS" guide to have a better understanding of what you're trying to do in general. E.g., this MDN one looks good: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

[dervinism]

I have a _static folder with css-rules.css file inside with a css selector as you described, but it has no effect on the logo.

[dervinism]

Inside the intro.html file there is part of the code refering to the navbar-brand class:

<div class="bd-sidebar noprint" id="site-navigation">
    <div class="bd-sidebar__content">
        <div class="bd-sidebar__top"><div class="navbar-brand-box">
    <a class="navbar-brand text-wrap" href="index.html">
      
        <!-- `logo` is deprecated in Sphinx 4.0, so remove this when we stop supporting 3 -->
        
      
      
      <img src="_static/logo.png" class="logo" alt="logo">
      
      
    </a>
</div>

I am able to size the navbar-brand-box but not the image inside. For example, the following css code would have an effect

.navbar-brand-box {
	max-width: 300px;
        width: 300px;
	max-height: 300px;
        height: 300px;
}

but the code below won't do anything

a.navbar-brand img {
	max-width: 300px;
        width: 300px;
	max-height: 300px;
        height: 300px;
}

Do you have more specific advice on how to scale the logo image?
Thanks!