> ## Documentation Index
> Fetch the complete documentation index at: https://docs.curator.interworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Styles

> Fine-tune the mobile and responsive behavior of your Curator portal with these settings.

export const BackendNavPath = ({levelOne, levelTwo, levelThree, tab, section}) => {
  const levels = [levelOne, levelTwo, levelThree].filter(Boolean);
  const lastLevel = levels.length ? levels[levels.length - 1] : '';
  return <span>
      In the <a href="/setup/installation/linux_installation">backend of Curator</a> using the left-hand navigation,
      navigate to the
      {levelOne && <strong>{" " + levelOne}</strong>}
      {levelOne && levelTwo && " > "}
      {levelTwo && <strong>{levelTwo}</strong>}
      {levelTwo && levelThree && " > "}
      {levelThree && <strong>{levelThree}</strong>} page.
      {(tab || section) && <>
          {" "}On the {lastLevel} page
          {tab && <> click the <strong>{tab}</strong> tab</>}
          {tab && section && " and"}
          {section && <> expand the <strong>{section}</strong> section</>}.
        </>}
    </span>;
};

Curator pages automatically adapt to screen sizes based on the default settings and industry standard design practices.
For example, when viewing Curator from a mobile device:

* The desktop navigation is replaced by a hamburger menu (☰).
* Page layout stacks vertically.
* The toolbar repositions to suit the narrower layout.

The default threshold is **1025 pixels**. That means any device whose content area is narrower than
1025px will display the mobile layout (hamburger menu, etc.), while
devices at 1025px or wider display the full desktop layout. Note that the majority of the design of Curator is responsive (i.e. does *not*
require a page re-load) but that some of the vendors we rely on like Tableau do require a page re-load to determine the
correct layout. Therefore, resizing the browser window may not always trigger the correct layout for all content.

If you would like to fine-tune the existing mobile behavior, you can do so by adjusting the following settings in your
theme.

## Configuring the Mobile Breakpoint

To change the width at which the portal switches to mobile view:

1. <BackendNavPath levelOne="Settings" levelTwo="Curator" levelThree="Themes" tab="Global" section="Mobile Settings" />
2. Change the **Mobile Width** value (default: 1025 pixels) to your preferred breakpoint.
3. Click **Save** to apply your changes.

## Device Layout Override

The **Device Layout Override** setting controls breakpoints specifically for Dashboard rendering, independent of
the navigation breakpoint described above. When enabled, two additional fields appear:

* **Tablet Layout Size** — the width threshold below which Dashboards render at tablet dimensions (default: 992px).
* **Mobile Layout Size** — the width threshold below which Dashboards render at mobile dimensions (default: 768px).

If your Tableau Workbook was designed for a bigger tablet or your users view Dashboards in landscape orientation on devices like an iPad Pro, consider increasing *Tablet Layout Size* to around 1380px.

As with the Mobile Width setting, these breakpoints are evaluated at page load and are not re-evaluated when the
browser window is resized after the page has loaded.

To enable and configure Device Layout Override:

1. <BackendNavPath levelOne="Settings" levelTwo="Curator" levelThree="Themes" tab="Global" section="Mobile Settings" />
2. Toggle **Device Layout Override** on.
3. Set your preferred **Tablet Layout Size** and **Mobile Layout Size** pixel values.
4. Click **Save** to apply your changes.

## Override Tableau Container Size on Mobile/Tablet

The **Override Tableau Container Size on Mobile/Tablet** setting resizes the Tableau embed container to fit the
viewable screen area on mobile and tablet devices. This does not change the Tableau Dashboard itself — only the
container Curator renders around it. Enable this setting when filters, toolbars, or other UI elements overflow
off-screen on smaller devices.

<Note>
  This setting only appears when at least one Tableau connection is configured in your portal.
</Note>

To enable the override:

1. <BackendNavPath levelOne="Settings" levelTwo="Curator" levelThree="Themes" tab="Global" section="Mobile Settings" />
2. Set **Override Tableau Container Size on Mobile/Tablet** to **On**.
3. Click **Save** to apply your changes.

## Mobile Menu Styling

The colors used in the mobile navigation menu are configured separately from the desktop menu.

1. <BackendNavPath levelOne="Settings" levelTwo="Curator" levelThree="Themes" tab="Menu" section="Mobile Menu" />

2. Update any of the following color settings as needed:

   * **Side/Mobile Navigation Trigger Color** — sets the color of the hamburger (☰) icon and the close (✕) button
     that appear when the portal is in mobile view. Default: `#999999`.
   * **Mobile Navigation Background Color** — sets the background color of the expanded mobile menu panel.
     Default: `#000000`.
   * **Mobile Navigation Text Color** — sets the color of the menu item text inside the mobile menu.
     Default: `#ffffff`.
   * **Mobile Navigation Underline Color** — sets the color of the divider lines between menu items in the mobile
     menu. Default: `#ffffff`.
   * **Mobile Navigation Active Item Color** — sets the background highlight color for the currently active menu
     item. Default: `#000000`.
   * **Mobile Navigation Active Item Text Color** — sets the text color of the currently active menu item.
     Default: `#ffffff`.

3. Click **Save** to apply your changes.

## Toolbar Mobile Settings

When the portal is in mobile view, the toolbar appears as a slide-out panel.

1. <BackendNavPath levelOne="Settings" levelTwo="Curator" levelThree="Themes" tab="Titles & Toolbar" section="Toolbar Mobile Settings" />
2. Update the **Toolbar Mobile Background Color** — sets the background color of the slide-out toolbar in mobile
   view. Default: `#ffffff`.
3. Click **Save** to apply your changes.

***

For a full list of all mobile-related theme fields and their descriptions, refer to the
[Themes controls reference](/site_content_design/theme/reference).