Theming configuration for sublayer in main menu

Client
,
1

Hi, I would like to configure for the items (eg: “Argument”) in the sub-layer menu to have the same hover style like item in main menu ( eg: “Offers” highlighed-red, bottom border, no surrounding broder…)

image
image1118×428 32.2 KB

I already tried the code below but it did not apply. Please help enlighten me :slight_smile:

"menu": {
    "mainMenu": {
      "before": {
        "background": "#f4f4f4"
      },
      "borderBottom": "2px solid #ddd",
      "mainLayer": {
        "background": "#f4f4f4"
      },
      "subLayer": {
        "background": "#f4f4f4",
        "item": {
          "hover": {
            "borderBottom": "2px solid #bf1528",
            "color": "#bf1528"
          }
        }
      },
2

Hi Tam, you can config hovering for item in subLayer by using subHorizontal of item

	menu: {
			item: {
				subHorizontal: {
					hover: {
						background: "green",
						border: `2px solid ${colors.interaction.hover.color}`
					}
				}
			},
		}
3

Updated: I’ve successfully configured to remove the border of hover item in sublayer by adding this on same nested level of main menu

"item": {
      "subHorizontal": {
        "hover": {
          "border": "none"
        },
}

I also get some help from a12 developer Giang to add this part to the styled component file (which seem not to be present in the project repo…) so I will follow up on this hint with the developer in my team

${StyledMenuItem} {
${hover(css`
                        &:before {
                            border-bottom: 2px solid red;
                        }
                    `)}
}