#Collapsed menu icon

13 messages · Page 1 of 1 (latest)

glass bay
#

I want to display collapsed menu icon (humburger icon) in pc layout in starlight theme

queen fernBOT
#

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

#

To display a hamburger (collapsed menu) icon in the PC layout using the Starlight theme, you can use Starlight’s built-in icon system. Starlight provides a set of built-in icons, including a "bars" icon that is commonly used for hamburger menus.

Here’s how you can display the hamburger icon using the <Icon> component:

import { Icon } from '@astrojs/starlight/components';

<Icon name="bars" label="Open menu" />
  • The name="bars" prop uses the built-in hamburger-style icon.
  • The label prop is recommended for accessibility, so screen readers can describe the icon’s purpose.

If you want the icon to always be visible (including on PC layouts), you may need to adjust your CSS to ensure it is not hidden at larger screen sizes, as typical responsive navigation patterns hide the hamburger icon on desktop by default. You can use the class prop to add a custom class for further styling:

<Icon name="bars" label="Open menu" class="my-hamburger-icon" />

Then, in your CSS, ensure .my-hamburger-icon is visible on desktop as needed.

For more on using icons in Starlight, see the Icons documentation and the list of all available icons including "bars" for the hamburger menu icon.<br>
Icons – Usage | All icons

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

#

@glass bay Kapa.ai is still learning and improving, please let me know how I did by reacting below.

glass bay
#

body > div > nav > starlight-menu-button > button

I want to be visible this button

#

@queen fern
body > div > nav > starlight-menu-button > button

I want to be visible this button

queen fernBOT
#

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

#

I'm sorry, but the provided knowledge sources do not contain specific information about a component named <starlight-menu-button> or how to control the visibility of a button within it in the Starlight theme. The documentation does mention that Starlight's global sidebar and navigation menu are responsive and that certain elements (like the mobile menu button or hamburger icon) are typically hidden on larger (PC) layouts and shown on mobile layouts by default. However, it does not provide explicit instructions or configuration options for forcing the menu button to be visible on desktop layouts.

If you want to customize the visibility of navigation elements, the recommended approach in Starlight is to override the relevant component (such as the Sidebar or Header) and adjust the CSS to control when elements are shown or hidden. You can learn more about overriding components in Starlight here: Overriding Components Guide and Overrides Reference.

To summarize:
There is no direct information in the knowledge sources about making the menu button (starlight-menu-button > button) visible on PC layouts. You would likely need to override the relevant component and adjust the CSS, but the exact steps are not detailed in the provided documentation.<br>
Overriding Components | Overrides Reference

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

#

@glass bay Kapa.ai is still learning and improving, please let me know how I did by reacting below.

glass bay
#

@queen fern
<button aria-expanded="false" aria-label="メニュー" aria-controls="starlight__sidebar" class="sl-flex astro-jif73yzw">
...
</button>

Maybe this html

queen fernBOT
#

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

#

Based on the provided knowledge sources, Starlight’s sidebar and navigation menu are responsive by default: the menu button (hamburger icon) is typically only visible on narrow (mobile) viewports. There is no direct configuration option documented to always show this button on desktop (PC) layouts.

However, you can achieve this by overriding the relevant component and adjusting the CSS. The menu button is rendered by the MobileMenuToggle component, which is included in the PageFrame layout component. By default, its visibility is controlled by CSS media queries to hide it on larger screens Reference: Layout.

To make the menu button visible on PC layouts:

  1. Override the CSS that hides the button on large screens.
    You would need to add custom CSS to override the default media query that hides the menu button on desktop.

  2. Add your custom CSS file to the customCss array in your Starlight config Reference: Custom CSS styles.

Example (in your custom CSS file):

/* Force the menu button to be visible on all screen sizes */
.starlight-menu-button {
  display: block !important;
}

Note: You may need to inspect the actual class or selector used by Starlight for the menu button in your version, as the class name may be generated or different.

  1. Add the CSS file to your config:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      customCss: ['./src/styles/custom.css'],
    }),
  ],
});
#

Summary:
There is no built-in Starlight config to always show the menu button on desktop, but you can override the CSS to make it visible on all screen sizes Custom CSS styles. The knowledge sources do not provide a ready-made solution, so you will need to inspect and override the relevant CSS yourself.

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