Header logo size

[forest bane]

On Starlight, my custom logo looks very small in the site header. How can I specify its height so that it's bigger? This will likely also increase the height of the site header which is OK.

[wet mango]

Hi @forest bane. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To adjust the size of your logo in the site header, you can use custom CSS styles. Here's how you can do it:

1. Add a CSS file to your src/ directory. In this file, you can specify the height of your logo. For example:

/* src/styles/custom.css */
.logo {
  height: 50px; /* Adjust this value to your preference */
}

2. Add the path to your CSS file to Starlight’s customCss array in astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
});

3. Apply the .logo class to your logo image in your HTML:

<img class="logo" src="./src/assets/my-logo.svg" alt="My Logo">

Please note that you'll need to adjust the CSS and HTML according to your project structure and requirements.

For more information, you can refer to the Starlight customization guide (https://starlight.astro.build/guides/customization#add-your-logo) and the Starlight CSS and Styling guide (https://starlight.astro.build/guides/css-and-tailwind#_top).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

[forest bane]

@wet mango The site logo was added via astro.config.mjs, not via html

export default defineConfig({
    integrations: [
        starlight({
            customCss: [
'./src/styles/custom.css',
              ],
            logo: {
              light: './src/assets/site-logo-light.png',
              dark: './src/assets/site-logo-dark.png',
              replacesTitle: true,
            },
...

[wet mango]

Let me check the knowledge base for you. One moment! :books:

---

I see, you're using the logo configuration in astro.config.mjs to add your logo. In this case, you can still use CSS to adjust the size of your logo, but you'll need to know the CSS selector that Starlight uses for the logo.

Unfortunately, the provided knowledge sources do not include information on what CSS selector Starlight uses for the logo, or whether it's possible to add a custom class or ID to the logo via the astro.config.mjs configuration.

As a workaround, you can inspect the logo element in your browser to find out its CSS selector, and then use that selector in your CSS file to adjust the logo size. Here's an example:

/* src/styles/custom.css */
/* Replace `selector-for-logo` with the actual selector */
.selector-for-logo {
  height: 50px; /* Adjust this value to your preference */
}

Then, include the path to your CSS file in the customCss array in astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
      logo: {
        light: './src/assets/site-logo-light.png',
        dark: './src/assets/site-logo-dark.png',
        replacesTitle: true,
      },
    }),
  ],
});

Please note that this is a general approach and might need adjustments based on your specific project and the way Starlight handles logos. For more detailed information, you might want to refer to the official Starlight documentation or their community support.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: