Hamburger Menu - AngeliqueMarachev/tech_writing GitHub Wiki

HamburgerMenuContainer

The hamburger menu container holds the items of an expanded hamburger menu. It features a list of menu items that navigate to sections or pages on your site, a fullscreen overlay, and a button to close the menu.

Introduction

Note: This API is not available in Wix Editor.

The hamburger menu is a compact navigational component used to save space on your site. Represented by an icon and usually positioned in the corner of a site, the menu remains hidden until the user clicks on the icon. This activates the hamburger menu container to expand and reveal the menu items.

The hamburger menu container consists of a list of links that guide the user to pages on your site. It also includes a fullscreen overlay and a close button, which users can click to collapse the menu back to its hidden state.

HamburgerOverlay

Represents the fullscreen overlay that appears when the hamburger menu is open.

Introduction

Note: This API is not available in Wix Editor.

The hamburger overlay is a visual component, which appears as a dark layer beneath the hamburger menu container. The overlay displays when the hamburger menu container is open. Its function is to direct user attention towards the menu items for improved navigation.

HamburgerCloseButton

Represents the icon button that closes the hamburger menu.

Hamburger Close Button CSS Classes

Note: This feature is only available to Wix Studio users.

You can use the classes listed below to style your HamburgerCloseButton elements with CSS.

For more information on styling your elements with CSS, see Styling Elements with CSS and the MDN CSS reference docs.

Important: Element structure and undocumented class names may change without advance warning. To avoid unintended style changes to your site, select elements with the documented class names only.

.hamburger-close-button

Targets hamburgerCloseButton elements. For example:

.hamburger-close-button {
  width: 90%;
  cursor: default;
  background-color: #116dff;
}

.hamburger-close-button__label

Targets hamburgerCloseButton label text. For example:

.hamburger-close-button__label {
  font-family: sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  color: black;
}

.hamburger-close-button__icon

Targets hamburgerCloseButton icon images. For example:

.hamburger-close-button__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 5px 5px 10px;
}