# Layout and style
{% hint style="danger" %} Theme retirement | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](/context/readme/theme-retirement.md).
{% endhint %}
Match the look of your brand by changing the style and layout of your **Header** menu and store title. Change the position of your menu links or display them in a drawer menu that can be opened by clicking a *Menu icon* (☰).
### **Inline links**
On desktop devices with **Inline links** enabled, Context's header displays your menu links horizontally. This setting is most effective with a few top-level menu items with short titles. If there are too many items in your navigation, we recommend setting the *Style* to *Menu icon*.
### Menu icon
The **Menu icon** always appears on mobile devices, but you use the **Style** option display it at all times. When customers click the menu icon (☰), the drawer menu opens.
STEPS
In your theme editor (**Customize**):
1. Click on the **Header** section to open the section settings.
2. Set the **Header style** to display your main menu as **Inline links** or show a **Menu icon** (☰) to place your links in a drawer.
> To customize colors for drawers, go to your theme settings and open the **Color** tab.
3. Choose an **Alignment** for your header on desktop. Either **Left** or **Right**.
4. (*Optional*.) Use the **Logo image** file selector to select or upload your logo file.
> We recommend using a logo with a transparent background (PNG format).
5. (*Optional*.) If you added a logo, use the **Custom logo width** slider to change size of the logo in the header.
6. (*Optional*.) Select a **Sticky header logo image** to appear in the header when the page is scrolled down.
> We recommend using a logo with a transparent background (PNG format).
7. Click **Save**.
## Settings reference
Click on the **Header** section to find the following settings:
| Setting | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Main menu | Select a menu to be displayed in the header. Menus are a Shopify feature. See [Shopify's Menus and links guide](https://help.shopify.com/en/manual/online-store/menus-and-links) to learn more. |
| Style | Choose a menu style: either Menu icon (☰) or Links. On mobile devices, the style is always set to Menu icon. |
| Logo image | Select or upload an image to be used as the logo in the header.
If you don't upload a logo, the name of your store appears instead. We recommend using a logo with a transparent background (PNG format).
|
| Logo max width | Select the display width, in pixels, of your logo image. Your logo height is scaled to match the width. You can use this setting to make the logo super tiny or super huge. |
| Sticky header logo image | Select or upload an image to be used as the logo in the header as you scroll. If you don't upload a logo, the space appears blank.
We recommend using a logo with a transparent background (PNG format). Because the sticky style of the header is smaller, we recommend using a smaller logo or icon for this spot. If your menu is longer (more than 5 items), you may not want to use a logo here, because the menu items could overlap the logo space.
|
\\
***
> **Related links**
>
> [Header](/context/pages/header.md)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.fluorescent.co/context/pages/header/layout-and-style.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.