# Design Overview
## Pages with the `Header_Navigation` Reusable Element
On pages which utilize the `header_navigation` reusable element, the Current User has the option to view the left-side menu by clicking the hamburger icon:
When this element is clicked, the "ShowMenu" custom state (type: yes/no, list: no) on the `header_navigation` reusable element is set to **yes**. This causes the `FG - Mobile Menu` and `FG - Fade Overlay` elements to become visible on the page, in order to show the Current User the mobile menu:
{% hint style="info" %}
Make sure the `FG - Fade Overlay` and the `FG - Mobile Menu` elements are always above the other elements on the page. These elements should also always expand the height of the entire page so they aren't cut off.
{% endhint %}
When the page is minimized to mobile, the `header_navigation` reusable element remains visible, but the right-side navigation links collapse in width, since the Current User can click the hamburger menu to view the navigation links:
{% hint style="info" %}
Please note that the`Icon Show Mobile Menu (Logged In)` element (within the `Group Logged In` element and inside of the header\_navigation reusable element) is hidden on page load, and becomes visible when the current page width is less than or equal to 800 pixels. You can view this in the conditional formatting of that element.
{% endhint %}
## Pages with the Desktop Navigation Reusable Element
Most of the pages in the "Logged In folder" contain the `desktop navigation` reusable element, which is shown on the left-hand side of the screen when the current page width is 887 pixels or greater:
When the page shrinks below 887 pixels, this Group Desktop Navigation Container is collapsed using hiding rules, and the `Group Mobile Header` and `Group Mobile Navigation Container` elements become visible (the top blue navigation groups at the top of the page):
These element groups contain the `mobile header` and `mobile submenu` reusable elements:
#### `Mobile Header` reusable element
#### `Mobile Submenu` reusable element
{% hint style="info" %}
Tip: There are transparent link elements over the top of the icon elements in the `mobile submenu` reusable element. In order to select and change the icon elements under the transparent links, click the transparent link and then use the **Command+Click** shortcut key to select the element underneath the transparent link elements.
{% endhint %}
## Tips to Make Sure Everything Displays Correctly
{% hint style="info" %}
If you are unable to decrease the height of the page, after decreasing the heights of the groups on the page, it is most likely because the `FG - Mobile Menu` and `FG - Fade Overlay` elements are tall and hidden in the editor; you are trying to decrease the page height to be shorter than those elements. To fix this, make the `FG - Mobile Menu` and `FG - Fade Overlay` elements visible in the editor, and decrease their heights. Then you will be able to decrease the height of the page.
{% endhint %}
{% hint style="info" %}
To ensure the mobile menu always displays correctly, make sure that the `FG - Menu` and `FG - Fade Overlay` elements' heights are **equal** to the height of the page, and that they are above the other elements on the page.
{% endhint %}
##
---
# 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://docs.littlebaytech.com/templates/responsive-base-template/design-resources/design-overview.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.