Search.../
  1. APIs

Menu CSS Classes

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

You can use the classes listed below to style your Menu 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.

Anchor menu classes

.anchor-menu

Targets anchor menu elements. For example:

.anchor-menu {
  background-color: #e6e6e6;
  padding: 10px;
  border-radius: 10px;
}
css | Copy Code

.anchor-menu__item

Targets anchor menu list item elements. For example:

.anchor-menu__item {
  margin-left: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
}
css | Copy Code

.anchor-menu__label

Targets anchor menu list item text. For example:

.anchor-menu__label {
  font-family: sans-serif;
  font-weight: 700;
  font-size: .8em;
  color: black;
}
css | Copy Code

Dropdown menu classes

.dropdown-menu

Targets dropdown menu elements. For example:

.dropdown-menu {
  width: 100%;
  border: none;
  border-bottom: 2px solid black;
}
css | Copy Code

.dropdown-menu__item

Targets dropdown menu items. For example:

.dropdown-menu__item {
  padding: 5px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
css | Copy Code

.dropdown-menu__submenu

Targets dropdown submenu containers. For example:

.dropdown-menu__submenu {
  background-color: #a2a2fc;
}
css | Copy Code

Horizontal menu classes

.horizontal-menu

Targets horizontal menu elements. For example:

.horizontal-menu {
  border: none;
  border-bottom: 2px solid black;
}
css | Copy Code

.horizontal-menu__item

Targets horizontal menu items. For example:

.horizontal-menu__item {
  padding: 5px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
css | Copy Code

.horizontal-menu__item-label

Targets horizontal menu item labels. For example:

.horizontal-menu__item-label {
  font-family: sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  color: black;
}
css | Copy Code

.horizontal-menu__submenu-container

Targets horizontal submenu containers. For example:

.horizontal-menu__submenu-container {
  background-color: #a2a2fc;
}
css | Copy Code

.horizontal-menu__submenu-title

Targets the menuItem that opens the submenu. For example:

.horizontal-menu__submenu-title {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}
css | Copy Code

.horizontal-menu__submenu-title-label

Targets the label of the menuItem that opens the submenu. For example:

.horizontal-menu__submenu-title-label {
  font-family: sans-serif;
  text-transform: capitalize;
  color: #5A5A5A;
}
css | Copy Code

.horizontal-menu__submenu-item

Targets horizontal submenu items. For example:

.horizontal-menu__submenu-item {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
css | Copy Code

.horizontal-menu__submenu-item-label

Targets horizontal submenu item labels. For example:

.horizontal-menu__submenu-item-label {
  font-family: sans-serif;
  text-transform: capitalize;
  background-color: #5A5A5A;
  color: #FFFFFF;
}
css | Copy Code

Vertical menu classes

.vertical-menu

Targets vertical menu elements. For example:

.vertical-menu {
  width: 100%;
  border: none;
  border-left: 2px solid black;
}
css | Copy Code

.vertical-menu__item

Targets vertical menu items. For example:

.vertical-menu__item {
  padding: 5px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
css | Copy Code

.vertical-menu__item-label

Targets vertical menu item labels. For example:

.vertical-menu__item-label {
  font-family: sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  color: black;
}
css | Copy Code

.vertical-menu__submenu

Targets vertical submenu containers. For example:

.vertical-menu__submenu {
  background-color: #a2a2fc;
}
css | Copy Code

.vertical-menu__arrow

Targets vertical menu expand/collapse icons. For example:

.vertical-menu__arrow {
  fill: #840292;
}
css | Copy Code

Was this helpful?

In This Article
  1. Anchor menu classes
  2. .anchor-menu
  3. .anchor-menu__item
  4. .anchor-menu__label
  5. Dropdown menu classes
  6. .dropdown-menu
  7. .dropdown-menu__item
  8. .dropdown-menu__submenu
  9. Horizontal menu classes
  10. .horizontal-menu
  11. .horizontal-menu__item
  12. .horizontal-menu__item-label
  13. .horizontal-menu__submenu-container
  14. .horizontal-menu__submenu-title
  15. .horizontal-menu__submenu-title-label
  16. .horizontal-menu__submenu-item
  17. .horizontal-menu__submenu-item-label
  18. Vertical menu classes
  19. .vertical-menu
  20. .vertical-menu__item
  21. .vertical-menu__item-label
  22. .vertical-menu__submenu
  23. .vertical-menu__arrow