Dropdown icon for submenu

Ask the community
8

You can use this code (works well for me in wix studio editor)

.horizontal-menu__submenu-title {
    position: relative; /* For proper positioning of the pseudo-element */
    display: inline-flex; /* To place the arrow to the right of the text */
    align-items: center; /* To vertically align the arrow and text */
}

.horizontal-menu__submenu-title::after {
    content: ''; /* Content is empty, as the SVG will be added through the background */
    display: inline-block;
    margin-left: 8px; /* Space between the text and the arrow */
 margin-right: 8px; /* Space between the arrow and the next menu item */
    width: 12px; /* Width of the SVG arrow */
    height: 12px; /* Height of the SVG arrow */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.282 5.034"><path d="M4.64116,4.89817a.5001.5001,0,0,1-.34277-.13574L.15727.86448A.50018.50018,0,0,1,.84282.136L4.64116,3.71165,8.44.136a.50018.50018,0,0,1,.68555.72852L4.98393,4.76243A.5001.5001,0,0,1,4.64116,4.89817Z"></path></svg>') no-repeat center;
    background-size: contain; /* Scale the SVG to fit the container size */
}

In this code:

  • content: ''; is left empty because we are using the background to insert the SVG.
  • display: inline-block; allows us to set width and height for the pseudo-element.
  • margin-left: 8px; adds space between the text and the arrow.
  • margin-right: 8px; adds space between the arrow and the next menu item, ensuring they don’t stick together. You can adjust the 8px value to your preferred spacing.
  • width: 12px; and height: 12px; set the size for the SVG arrow. You can adjust these values to fit your desired dimensions.
  • background: url('data:image/svg+xml;utf8,...') no-repeat center; inserts the SVG code as a background and centers it.
  • background-size: contain; ensures the SVG scales to fit the container size.
1 Like