# 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:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY6JWW9iptzpHFSbdIX%2F-LY6KX49OBhpOuLIXcSj%2FMobileMenuMessagingTemplateUpdated.png?alt=media\&token=eadfb1c4-495e-4404-a23e-98018f9c4498)

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:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY6JWW9iptzpHFSbdIX%2F-LY6M2XbwGFukNMfISsb%2FFGMobileMenuAndFGFadeOverlayElements.png?alt=media\&token=0ba8c3f2-bd80-4c05-9f24-99044169ee01)

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY6JWW9iptzpHFSbdIX%2F-LY6MoQzxf8TZ6PGQy32%2FMobileMenuPreviewDesktopMessagingTemplate.gif?alt=media\&token=02bcf396-3196-42d8-ba0a-db46200c55fc)

{% 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:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LY6D442iFpLS8HNlHeK%2F-LY6DlfpMkq0jzm5_6vo%2FMobileResponsiveViewOfMobileMenuResponsiveBase.gif?alt=media\&token=748d7f8f-5123-4501-b9da-e55f6c09b052)

## 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:

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LWz2slKcuhlD8zKvRIO%2F-LWz3CO-P1bV-bgAibD2%2FGroupDesktopNavigationContainerDesignOverview.png?alt=media\&token=b0458c00-ae77-4616-80cd-4f277fccb9fe)

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): 

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LWz2slKcuhlD8zKvRIO%2F-LWz3FT_bML0tgL6MObV%2FResponsiveDesktoptoMobileAccountDesign.gif?alt=media\&token=fa140aa8-b9d3-4c10-be1e-474f76c43618)

These element groups contain the `mobile header` and `mobile submenu` reusable elements:

#### `Mobile Header` reusable element

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LWyaq7UCZLKeGY1FVqP%2F-LWyauL4UryysIhQm-H3%2FMobileHeader.png?alt=media\&token=36ac81a1-05e3-49f0-ac13-c9ab5409e338)

#### `Mobile Submenu` reusable element

![](https://1788973256-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L8uq1TOYNrDiHA5baDk%2F-LWyaq7UCZLKeGY1FVqP%2F-LWyb39kUpXrdkYlQ49f%2FMobileSubmenuRE.png?alt=media\&token=a61374b4-e04d-4d64-a33d-61c9f16c71af)

{% 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" %}
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 %}

{% 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 %}